【webpack5】webpack インストールから導入まで使い方まとめ【web制作】

はじめに
webpack使い方まとめ
おわりに

はじめに

今回はモジュールバンドラーであるwebpackについてのまとめを紹介していきます。

web制作でwebpackを使う場合の使い方をまとめています。

web制作ではコーディング以外にたくさん気を付けないといけないことがあります。

webpackを導入すればその面倒な作業を全て自動化させることができるかもしれないので、気になる方はぜひ見てください。

対象者

web制作で面倒な作業があると感じている方
webpackを使って作業を自動化したい方

それではwebpackのまとめに移ります。

webpack使い方まとめ

webpackのインストールから使い方までまとめました。

公式サイトはこちらから

webpack

セクションごとに記事に分けていますので気になった方は参照してみてください。

webpackとはなにか? 環境構築してみよう

webpackとはそもそも何か、どうやって環境構築をすればいいのかを知りたい方はこちらを参照してください。

【webpack5】webpackとはなにか? 環境構築してみよう windows10版【web制作】

web制作にある程度慣れてきた方向けにwebpackとはなにか、メリット・デメリットを説明しています。またwebpackの環境構築についても記載していますのでwebpackに興味のある方はぜひ導入を検討してみてください。

webpackについてのメリット・デメリットをまとめ、windows10での環境構築方法について紹介しています。

webpackを最小限の構成でコンパイルする

とりあえずwebpackを動かしてみたい方はこちらを参照してください。

【webpack5】webpackを最小限の構成でコンパイルする【web制作】

今回はwebpackを最小限の構成でコンパイルするやり方を紹介します。webpackはどういうはたらきをするのかがイメージしにくいといった方がいるかと思います。最小限の構成の時点からwebpackの動きを把握しておくことで、処理や記述が増えたとしても問題の切り分けが素早くできるようになります。

エントリポイントとなるファイルを1つのみ作成し、最小限の構成でwebpackを動作させています。

modeオプションを指定してコンパイル方法を切り替える

開発環境用と本番環境用でコンパイルを切り替えるやり方を知りたい方はこちらを参照してください。

【webpack5】modeオプションを指定してコンパイル方法を切り替える【web制作】

今回はwebpackのmodeオプションを指定してコンパイル方法を切り替えるやり方を紹介します。modeオプションに開発環境用、本番環境用を指定することで出力されるバンドル後のファイル内容が大きく変わります。オプションを指定するやり方にも複数あるので参考にしてください。

それぞれの環境でコンパイルした場合のメリット・デメリットとまとめています。

またコンパイル後どのように出力されるかを載せています。

webpack.dev.jsとwebpack.prod.jsを作成して、modeオプションによって実行するファイルを切り替える

modeオプションによって実行するファイルを切り替えるやり方を知りたい方はこちらを参照してください。

【webpack5】webpack.dev.jsとwebpack.prod.jsを作成して、modeオプションによって実行するファイルを切り替える【web制作】

今回はwebpack.dev.jsとwebpack.prod.jsを作成して、modeオプションによって実行するファイルを切り替えるやり方を紹介します。実行する環境でファイルを分けることによって非常に見通しが良いプログラムになります。webpack公式も推奨とする方法のため、これから導入する方はぜひこちらのやり方を参考にしてください。

1つのファイルの中に異なる環境ごとの処理が記載しなくてもよくなるので非常に見通しが良くなります。

entryオプションを設定する

entryオプションの記述方法について知りたい方はこちらを参照してください。

【webpack5】entryオプションを設定する【web制作】

今回はentryオプションを記述してエントリポイントを設定する方法について紹介していきます。entryオプションはいろんな設定の記述方法がありますが、一般的によく使われている記述方法を紹介します。ションの指定方法が分からない方は参考にしてください。

web制作でよく使うであろう記述の方法で記載しています。

outputオプションを指定する

outputオプションの記述方法について知りたい方はこちらを参照してください。

【webpack5】outputオプションを指定する【web制作】

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

こちらもweb制作でよく使うであろう記述の方法で記載しています。

webpack-watched-glob-entries-pluginを使ってentryオプションをglobで複数指定する

entryオプションを動的に複数指定するやり方を知りたい方はこちらを参照してください。

【webpack5】webpack-watched-glob-entries-pluginを使ってentryオプションをglobで複数指定する【web制作】

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

webpack-watched-glob-entries-pluginというプラグインを使ったやり方で紹介しています。

clean-webpack-pluginを使ってコンパイル毎に出力先フォルダ内を削除する

webpackでコンパイルするたびに出力先のフォルダ内を自動で削除するやり方を知りたい方はこちらを参照してください。

【webpack5】clean-webpack-pluginを使ってコンパイル毎に出力先フォルダ内を削除する【web制作】

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

clean-webpack-pluginというプラグインを使ったやり方で紹介しています。

html-webpack-pluginを使ってhtmlファイルを出力する

htmlファイルをwebpackでバンドルせずにファイルとして出力するやり方を知りたい方はこちらを参照してください。

【webpack5】html-webpack-pluginを使ってhtmlファイルを出力する【web制作】

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

html-webpack-pluginというプラグインを使ったやり方で紹介しています。

html-loaderとAsset Modulesを使って画像やフォントのアセットファイルを使用できるようにする

htmlやcss内で指定した画像やフォントなどのアセットファイルについて、依存関係の解決や別ファイルとして出力するやり方を知りたい方はこちらを参照してください。

【webpack5】html-loaderとAsset Modulesを使って画像やフォントのアセットファイルを使用できるようにする【web制作】

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

webpack5から新たに搭載された標準モジュールであるAsset Modulesを使ったやり方で紹介しています。

html-webpack-pluginで複数のhtmlファイルを動的に出力する

複数のhtmlファイルを動的に出力するやり方について知りたい方はこちらを参照してください。

【webpack5】html-webpack-pluginで複数のhtmlファイルを動的に出力する【web制作】

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

html-webpack-pluginにはオプション等で複数のhtmlファイルを動的に出力する方法がないので自作関数で出力するやり方で紹介しています。

sassのコンパイルをする

sassをコンパイルするやり方につい知りたい方はこちらを参照してください。

【webpack5】sassのコンパイルをする【web制作】

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

sassのコンパイルにDart Sassを使ったり、ベンダープレフィックスを付けるやり方について紹介しています。

sassの画像やフォントのアセットファイルの依存関係を解決する

webpackでsassの画像やフォントのアセットファイルの依存関係を解決するやり方について知りたい方はこちらを参照してください。

【webpack5】sassの画像やフォントのアセットファイルの依存関係を解決する【web制作】

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

エイリアスを使った絶対パスでの依存関係解決の方法を紹介しています。

テンプレートサンプル紹介

web制作をする場合のwebpackのテンプレートを紹介しています。

【webpack5】webpackのテンプレートサンプル紹介【web制作】

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

webpackの記述の仕方やプラグインについては何となく分かったけど構築の仕方が分からないと困っている方は参考にしてください。

その他

その他webpackではbrowser-syncやbabel、eslintなどを使ったりします。

これらのやり方についても随時更新していきます。

(やるかどうかはやる気次第・・・)

おわりに

以上web制作でwebpackを使う場合の使い方についてまとめてみました。

いかがだったでしょうか。

webpackを導入すれば面倒な作業を全て自動化させることができるかもしれないので、気になる方はぜひ導入してみてください。