为不同的环境的配置设置的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