为不同的环境的配置设置的WebPack

＃645为不同的环境的配置设置的WebPack

 金太勋 @纪州

场景＃

例如，如果要在多个捆绑环境如下：

• 如果你需要代码组件，仅捆绑（默认）。让独立。
• 如果需要封装，模块依赖组件来源捆绑在一起。让包装
• WebPACK中的环境通过分离配置文件，并让它相契合的WebPack运行环境合并

的WebPack合并安装＃

的WebPack合并

$ cd path/to/workspace
$ npm install webpack-merge --save-dev

的WebPack配置设置文件＃

WebPACK中的配置文件，如下所示分隔：

文件	说明
./webpack.config.js	在所有设置优先股
./config/webpack.config.standalone.js	设置为使用独立包
./config/webpack.config.packaged.js	设置为使用捆绑打包

somecomponent
  ├─ ..
  ├─ config/
  │   ├─ ..
  │   ├─ webpack.config.packaged.js
  │   └─ webpack.config.standalone.js
  ├─ package.js
  └─ webpack.config.js

的WebPack配置文件内容＃

webpack.config.js ＃

var path = require("path");
var webpack = require("webpack");

var config = {
  // 기본 설정
};

module.exports = function(env) {
  env = env || "standalone";
  return require("./config/webpack.config." + env + ".js")(env, config);
};

配置/ webpack.standalone.js ＃

var webpackMerge = require("webpack-merge");

var config = {
  // standalone 번들링 설정
}

module.exports = function(env, defaultConfig) {
  return webpackMerge(defaultConfig, config);    // ../webpack.config.js와 merge
};

配置/ webpack.packaged.js ＃

var webpackMerge = require("webpack-merge");

var config = {
  // packaged 번들링 설정
}

module.exports = function(env, defaultConfig) {
  return webpackMerge(defaultConfig, config);    // ../webpack.config.js와 merge
};

的WebPack合并的更多用法这里所确定

NPM脚本配置＃

通过运行的WebPack NPM脚本注册您的环境。

// package.json
...
"scripts": {
  ...
  "build": "webpack --env=standalone",
  "build:pkgd": "webpack --env=packaged"
}
...

结论＃

优点

• 可以消除冗余属性，为每个环境。
• 不需要编程的偏好。

缺点

• 此设置增加文件为每个环境。
• 看各种文件可以掌握整个集合。

参考

• WebPACK中 - 混乱的零件
• 对多个环境配置的WebPack