Webパッケージとは?

※クイックキャンパス講座の先端開発多機能オールインワンパッケージを参考に作成しました.

🤷‍♂️Webパッケージとは?

「Webパッケージ」という名前のツールは、モジュール(モジュールを知らなかったら?)バンドルパッケージです.
ここには何かバンドルバッグがありますか?

🔀バンドルとは?

コレクションとは、モジュール間の相互参照関係を維持しながら、それらを1つのファイルに組み合わせることです.
では、なぜこのバンドルバッグという過程を経験するのでしょうか.

🙋‍♂️なぜバッグを縛ることが重要ですか?

Web Packは、寒波の日にモジュールが含まれるため、ファイルへのアクセス数が減少するため、寒波の日にモジュールを検索する速度が速くなるため、検索時間を短縮します.

未使用のコードを削除します.参照コードのみからなるモジュールに変換されるためです.

ファイルサイズを小さくします.ファイルが1つの場所に集中して圧縮されるためです.

だからこそ、束が大切に使われています.

🗂️Webパッケージの基本構造

entry & output

entry:モジュール依存関係を理解するための開始点を設定

output:Webパッケージによって生成されるバンドルファイルに関する情報を設定

const path = require("path");

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
  },
  target: "node",
};

※path:outputが生成された場所、filename:outputの名前、target:コンパイルされた環境

Loader & Plugin

loader:様々なタイプのモジュール間の依存関係を入力および処理するために使用される

module.exports {
	...
	module: {
    rules: [
      {
        test: /\.css$/i, // 어떤 파일이 로더의 대상이 되는지를 지정(정규표현식 씀)
        use: [
          "style-loader",
          {
            loader: "css-loader", //css 처리하는 로더
          },
        ],
      },
    ],
  },
}

plugin:plugin:Webパッケージの作業プロセスに介入することでバンドルファイルを変更し、開発中に便利

const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports {
...
plugins: [
    new HtmlWebpackPlugin({ // 기본 html 파일 생성해주는 플러그인
      template: "./template.html", //기본으로 생성될 html파일 설정 
    }),
  ],

}

Chunk

コンテンツを追加してバインドし続けると、バンドルファイルの容量が増加し、バンドルファイルの到着時間が遅延します.ビームファイルをChungと呼ばれるいくつかの条件に分離します.分離の基準は多く、典型的にはランタイムブロックファイル、仕入先ブロックファイルである.

ランタイムブロックファイル

ランタイム環境で実行されるコードのファイルのみを配置します.

エンタープライズブロックファイル

外部パッケージコードのみを含むファイル

Minification & Mangling

コードの形式を消去または置換の形式に最適化するプロセス.ターゲットは、アプリケーションの実行に関係のない要素です.たとえば、コメント、コンソール、変数などです.

🪛の最後の部分

Web Packはよく知っていますが、適切に使えば、パフォーマンスを大幅に向上させることができると思います.WebPackを実際に使ってみましょう…!