インストール
npm install --save-dev webpack
npm install --save-dev webpack-cli
コマンドは ./node_modules/.bin/webpack に格納されます。
また、package.json(npm)に以下のように書くと、
npm run buildで実行できるようになります。
{
"scripts": {
"build": "webpack --mode production"
}
}
基本的な概念
- Entry: 入力
- Output: 出力
- Loader: JavaScriptファイル以外を扱えるようにするためのもの
- Plugins: プロセス中に加工するもの
設定
基本フォーマット
以下のような感じです。
module.exports = {
entry: './index.js',
output: {
filename: 'bundle.js'
}
}
webpack.config.jsの書式
- entryは複数書ける→multiple entry points
[name]がエントリ名に置換される模様。
entry
entry: './index.js'のように文字列を渡すと、名前は’main’になっているようです。
If a string or array of strings is passed, the chunk is named main.
module
以下の3つが指定可能
- 絶対パス
- 相対パス(
.か..で始まる) - モジュールパス
output
主なオプション
- filename: 出力ファイル名
- path: 出力パス(絶対パス)
- libraryTarget: ライブラリのエクスポート方法
- Authoring Librariesも参照。
- よく使いそうなのは以下の2つかなと。
var: 変数として定義umd: 環境によって自動割り当て
- library:
varの場合は変数名
webpack.config.jsには以下のように記載する。
const path = require('path');
module.exports = {
...
output: {
path: path.resolve(__dirname, 'dist/assets'),
filename: 'bundle.js'
}
}
resolve
主なオプション
- alias: importしたときのパスのaliasをつくる
- 表を見てピンとこないときは、まずModule Resolutionを見たほうが良さそう>です。
alias
- ‘$‘で終わる場合は、完全一致になります。
- 解決した結果がディレクトリの場合は
index.jsとなっていますが、これはpackage.json(npm)で別のものにできるようです。
プラグイン
- バンドル対象の上書き: ContextReplacementPlugin
- ProvidePlugin
最小化
Minification参照。
- UglifyJSPluginを使う
--optimize-minimizeを使う
requireに変数があるときの挙動
require with expressionによれば、
require("./template/" + name + ".ejs");のように、
変数nameを含むようなパターンがあるときは、
「全ての文字」にマッチするように正規表現が作られます。
これによって、全てのファイルが取り込まれ、 正常に動作しますが、その代償として、不要なファイルが含まれる可能性があります。 これを制御するためには、ContextReplacementPluginを使うとよいです。