webpack4 modeオプションを予習する

2018-01-10 #javascript  #webpack 

webpack4で最適化を自動で行ってくれるmodeオプションがつくようになるのでメモ。

準備

実行環境

$ node -v
v9.2.0
$ yarn -v
1.3.2

package.json

{
  "name": "webpack4-mode-example",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {
    "vue": "^2.5.13",
    "webpack": "^4.0.0-alpha.4",
    "webpack-cli": "^2.0.2"
  }
}

webpack4は yarn add webpack@next でインストールした。
4からcliは分離されたのでwebpack-cliも入れておく。

試してみる

modeオプションを未指定の場合

ビルドはできるが怒られてしまう。

WARNING in configuration The ‘mode’ option has not been set. Set ‘mode’ option to ‘development’ or ‘production’ to enable defaults for this enviroment.

modeオプションを使う

上記警告文の通り、modeオプションに指定できる値は’development’か’production’のどちらかになる。 他に’none’も指定可能で、その場合modeオプションは無効化される。使い所はわからないけどエラーのデバッグとかだろうか。

この値をwebpackに渡す方法は2通りある。

a. コマンドパラメータとして指定

webpack -—mode=development

この場合webpack.config.jsの設定オブジェクトにmodeプロパティを指定しなくていい。

module.exports = {
  entry: './index.js',
  output: {
    filename: 'bundle.js',
  },
};

指定してもコマンドパラメータとして渡したほうが優先されるようだ。デフォルト値としての使い方ができるかもしれない。

b. 設定オブジェクトのパラメータとして指定

module.exports = {
  // ...,
  mode: 'production'
}

この場合実践的にはenvパラメータを渡して、

yarn run webpack --env.prod

こんな感じで使えばいいだろうか。

const config = isProd => {
  return  {
    // ...,
    mode: isProd ? 'production' : 'development',
  };
}

module.exports = env => {
  return config(!!env.prod);
}

最適化の内容とは

  • production のとき、
    • すべての最適化を有効にします
    • watchオプションは使えません
    • モジュール結合(Scope Hoisting)を有効にします
  • development のとき、
    • コメントは削除しません
    • 開発のヒントを表示します
    • devtool: evalでソースマップを出力します

とのこと(webpack/webpack#6064 より)。 Scope Hoistingはよくわかっていないので4が出る前に理解しておきたい。