私は公式の webpack ドキュメントを通じて webpack を学習しています;
当初、webpack はすべてのリソースをモジュールとして処理し、それらをバンドルにパッケージ化していました。見た目もかなり良くてとても魅力的です。
しかし、後で見たとき、パッケージの概念について混乱しました。
コードの分離を見ると、ブラウザの並列読み込みおよびキャッシュのメカニズムを最大限に活用するには、css ファイルとサードパーティのライブラリ ファイルを別々にバンドルにパッケージ化する必要があると言われています。
その結果、リソースを導入するための従来のタグの使用は、js での読み込みを表示するための require の使用に変更されました。
では、依存関係を明示的に宣言する以外に、モジュールをパッケージ化する利点は何でしょうか?
コードが分割されている場所を見て、分割する必要があるのに、なぜモジュールをパッケージ化する必要があるのかと考えました。
このモジュールをパッケージ化するメリットはありますか?
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
例えばそこにCSSを分けます。まず CSS の導入を要求し、次にプラグインを使用して CSS を個別にバンドルにパッケージ化してから、タグを使用して HTML に CSS を導入する必要があります。
なぜわざわざ梱包する必要があるのですか？いつものように HTML でタグを使用する方が良いのではないでしょうか?
モジュール化はコードの記述を容易にするためのものであり、パッケージ化はコードを実行するのを容易にするためのものです
さらに、webpackは個別にパッケージ化することができます
SPA を使用している場合、または scss、postcss、画像圧縮、自動画像 Base64 変換を使用していない場合、CSS または JS を手動で挿入することは実際には大きな問題ではありません。 Vue の複数ページのプロジェクトで作業している場合、HTML に js または css を自動的に挿入すると便利だと実感するかもしれません。
以前は手動リンクでCSSを導入する場合、便宜上すべてのCSSコンテンツを同じファイルに入れ、そうでない場合はリンクを追加する必要がありましたが、すべてのCSSを1つのファイルに開発するのは不便です。 Webpackを実行した後、CSSファイルを可能な限り分割すると、ファイル構造が明確になります
CSS に関する Webpack の利点、今のところ私が思いつくのはこれだけです