webpack

今回はモジュールバンドラーであるwebpackについてのまとめを紹介していきます。web制作でwebpackを使う場合の使い方をまとめています。web制作ではコーディング以外にたくさん気を付けないといけないことがあります。webpackを導入すればその面倒な作業を全て自動化させることができるかもしれないので、気になる方はぜひ見てください。

今回はwebpackのテンプレートサンプルを紹介していきます。web制作でwebpackを使う場合のテンプレートを紹介します。入したけどどういうプラグインを導入すればいいか分からない、webpackを導入したけどどういうプラグインを導入すればいいか分からない、どのように構築していけばいいか分からないといった方に見ていただけるとうれしいです。web制作をしている方はwebpackを使えるようになるとできる幅が広がるのでぜひ参考にしてください。

今回はwebpackでsassの画像やフォントのアセットファイルの依存関係を解決するやり方ついて紹介します。webpackでsassをコンパイルするときに画像などのパスの指定が合ってなくてエラーになることを経験した方は多いかと思います。sassの画像やフォントのアセットファイルの依存関係を解決するやり方が分からない方は参考にしてください。

今回はwebpackでsassをコンパイルするやり方ついて紹介します。web制作ではsassのコンパイルは必須ですよね。webpackでももちろんsassのコンパイルは出来るのですが、いろんなローダーやプラグインを使用しないといけないので意外と面倒です。sassのコンパイルのやり方が分からない方は参考にしてください。

今回は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を使っていると出力先のフォルダに無駄なファイルが溜まっていってしまいます。無駄なファイルを手動で削除していくのが面倒に感じている方は参考にしてください。

今回はwebpack-watched-glob-entries-pluginを使ってentryオプションを動的に複数指定するやり方について紹介します。大規模なプロジェクトになってくるとエントリポイントが複数になる場合があり、その都度entryオプションを変更するのは面倒ですよね。エントリポイントの複数指定を毎回手動で行っている方は参考にしてください。

今回はoutputオプションを記述してコンパイル後にバンドルされたJavaScriptファイルの出力先を設定するやり方について紹介していきます。outputオプションはいろんな設定の記述方法がありますが、一般的によく使われている記述方法を紹介します。outputオプションの指定方法が分からない方は参考にしてください。