2021-12

今回はhtml-webpack-pluginで複数のhtmlファイルを動的に出力するやり方について紹介します。web制作ではページごとにhtmlファイルを複数作成するかと思います。ですがhtml-webpack-pluginは複数のhtmlファイルを動的に出力するオプションみたいなものはなく、自分で作るしかありません。複数のhtmlファイルを扱っている方は参考にしてください。

今回はhtml-loaderとAsset Modulesを使って画像やフォントのアセットファイルを使用できるようにするやり方を紹介します。htmlやcssでは画像の読み込みやフォントの設定をするかと思います。ですがそのままではwebpackがこれらの設定をうまく検出してくれなくて、依存関係を解決してくれないままコンパイルされてしまいます。画像やフォントのアセットファイルの扱いに困っている方は参考にしてください。

今回はhtml-webpack-pluginを使ってhtmlファイルを出力する方法について紹介します。webpackはいろんなファイルをバンドルすることができますが、htmlファイルはバンドルさせずに個別に出力させたいですよね。html-webpack-pluginを使えばhtmlファイルを個別に出力させることができるようになります。

今回はclean-webpack-pluginを使ってコンパイル毎に出力先フォルダ内を削除するやり方について紹介します。webpackを使っていると出力先のフォルダに無駄なファイルが溜まっていってしまいます。無駄なファイルを手動で削除していくのが面倒に感じている方は参考にしてください。