webpackに引数を渡す

bundleをいくつか作らないといけない時に、毎回 webpack.config.js を書いてると大変なので…（今回１００くらい書かなくちゃいけなさそうになりました）webpackに引数を渡して、それによって分岐できるようにしました。

公式

webpack：Environment Variables
正直、env.の後ろが決まった名前なのかどうなのかよくわからなかった。
やってみたらなんでもできた。

webpackに引数を渡す

webpack --env.hoge=ほげ

複数ある場合も半角スペース区切りでできる

webpack --env.hoge=ほげ --env.fuga=ふが

webpack.config.js

module.exports = env => {
  console.log('hoge: ', env.hoge);  // 出力：ほげ

  return {
    // ...いつものentryとかoutputとか
  };
};

module.exports の後ろに env があるのがポイント。

npm runに引数を渡す

npm run build -- --env.fuga=ふが

--が--env.xxx=zzzの前にあるのがポイント

package.json

  //略
  "scripts": {
    "build": "webpack",
  },
  //略

webpack.config.js

module.exports = env => {
  console.log('hoge: ', env.fuga);  // 出力：ふが

  return {
    // ...いつものentryとかoutputとか
  };
};

引数による分岐

webpack.config.js

module.exports = env => {
  console.log('design: ', env.design);

  const entries = ['main.js'];
  if (env.design == 'a') {
    entries.push('design_a.js');
  }

  return {
    entry: entries,
    // ...略
  };
};