Webpack

今回は、CSSファイルを直接importしてMiniCssExtractPluginで出力している場合のminify設定方法を解説します。 Webpackでは、mode: ‘production’…

今回は、Webpackの設定ファイルを開発用と本番用で分割する方法を解説します。 設定ファイルを分けるメリットは、環境ごとに最適なビルドプロセスを構築できる点です。 例えば、開発環境では「高速なビルドとデバッグのしやすさ…

Webpackは、エントリポイントを起点に依存関係をたどり、複数のJavaScriptファイルを1つにバンドルします。 その過程で、JSやCSSから画像ファイルへの参照を検知すると、それらもプロジェクトのアセットとしてバ…

今回は、Webpackで出力ファイルにハッシュ値を自動で付ける方法を解説します。 Webpackでは、ブラウザキャッシュへの対策として、バンドルしたファイル名にハッシュ値を付与して出力することが可能です。 また、Html…

今回は、Webpackでバンドル後のJavaScriptをHTMLに自動で読み込ませる方法を解説します。 正確には、MiniCssExtractPluginなどでCSSを別ファイルとして抽出している場合、これらもすべて自…

今回は、Webpackを使ってSassをコンパイルする方法をはじめ、コンパイルされたCSSにベンダープレフィックスを付与する方法や、CSSを別ファイルとして出力・管理する方法について解説します。 本記事は、Webpack…

今回から複数回に渡って、モジュールバンドラー「Webpack」の使い方を解説していきます。 Webpackを使うことで、複数のJavaScriptファイルを1つのファイルにまとめられるほか、SassをCSSにコンパイルし…