webpack
冗長なので書き直し。
基礎
webpack は バンドラ、トランスパイラ と呼ばれるツール。 npm 等のモジュール管理ツールでインストールした js モジュール群を単一ファイル、或いは複数ファイルにまとめたり、 TypeScript 等の AltJS をトランスパイル(変換)する。
類似ツールとして Grunt、 gulp.js が存在する。こちらは タスクランナー と呼ばれたり(する|した)。
前準備
Node.js で動作する。 npm
は Node.js
で動作するモジュール(パッケージ)管理ツール。
webpack
自体も npm
でインストールする。
バンドルについては主の js
ファイルから require
や import
で読み込むことで webpack
で適宜バンドルされる。
また、読み込み時にインラインで記載したパラメータ(QueryString?)や webpack.config
等の設定ファイルの内容に基づいて各種 loader
経由でトランスパイルされる。
npm-scripts
に記載する事でもある程度対応できるが、ファイル読み込み時に逐次記載する手間や全体の見通しが悪くなる事を考慮すると webpack.config
を作成する事が望ましい。
設定
上記記載の通り webpack.config
を作成する。また、 webpack
コマンドについてはオプション等もある事から npm-scripts
の使う。
環境については webpack-merge を利用した設定ファイル自体を分ける方法、 webpack
の env
を利用して設定ファイル内で変更する方法がある。ケースバイケースで対応する。
Environment Variables | webpack
Loaders
トランスパイルする対象のファイル名 + loader
で大体見つかる。類似のものがある場合や長期間メンテナンスされていないものもあるため注意。
Plugins
webpack
の機能を拡張するもの。
あたりは使用するケースが多い。
注意点
バージョンが変わると config
ファイルの記述方法が変わる事がある。また、各 loader
が動作しなくなることもあるため、( webpack
に限った話ではないが)バージョンアップには十分注意すること。
Node.js
のバージョンアップで動作しなくなる場合がある。 npm rebuild
、あるいは
npm cache clean --force
rm -rf node_modules
npm i
で大体直る。直らなかった場合、 nodenv 等のバージョンマネージャも検討。
使うべき事例(雑感)
基本はトランスパイル機能を目的に使用する。 webpack
でバンドルした各ライブラリはグローバルからの参照が(未設定では)できないため、 JavaScript
での実装に重きを置かないWeb制作等の場合は周知のコストやイレギュラー対応の方が高くつく可能性がある。
js
や css
( PostCSS
、 Sass
等) のトランスパイルに留めるのであれば大きく問題にはならない。
静的サイトの出力(テンプレートファイルから HTML
の出力) は gulp
に分がある気がする。 publicPath
の概念が分かりづらい。 webpack
で無理矢理独自の生成タスクを作るくらいなら、要件が許せば最初から Static site generator の導入や JAMstack にするのも手。その場合、置き場所(webサーバ)はそこまで選ばないが、開発環境や学習コストには配慮すること。