はじめに Webpack5が 2020/10/10にリリース された。
Webpackは中規模以上のweb軽開発ではデファクトスタンダードなんじゃないだろうか。
自分が関わっているほとんどすべてのフロントエンドではWebpackが使用されている。
慣れるまでは難しいが、学んだ内容を備忘録的にこのページにまとめる。
基本概念 Webpackとは基本的にはJavaScriptアプリケーション用の静的モジュールバンドラーです。
つまり、基準となるJSファイルを指定することで、それに紐づく依存関係モジュールを1つのファイルに結合してくれます。
これを理解するために基本コンセプトは以下です。 概念 意味 entry 依存関係の起点となるファイル。デフォルトで./src/index.js output 出力パスやファイル名。 loaders JSとJSONファイルだけ理解するWebpackに、変換可能なモジュールを追加します。主にtest(対象ファイルの識別)とuse(どのローダーを使用するか)の2つのプロパティを使って設定します。 plugins requireしてpluginsに追加することで、機能を追加できます。 mode developmentやproductionまたは独自の環境の最適化に使用できます。 entry / output [https://webpack.js.org/concepts/entry-points/](Entry Points) https://webpack.js.org/concepts/output/ 最も単純な例は以下のような設定です。
module.exports = { entry: './src/file.js', output: { filename: 'bundle.js', }, }; より複雑な設定では、複数ページのアプリケーション用にマルチエントリの設定や、ouputのファイル名やパス名を動的に変更することも可能です。
Loaders https://webpack.js.org/concepts/loaders/ 例として、以下のようにローダーを追加します。
npm install --save-dev css-loader ts-loader module.exports = { module: { rules: [ { test: /\....