在分离配置文件之前，我们需要安装一个小工具webpack-merge ，当然你也可以用类似的,作用就是扩展对象
安装webpack-merge
npm i webpack-merge --save-dev
在webpack.config.js中修改
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const merge = require('webpack-merge');
const PATHS = {
app: path.resolve(__dirname, 'app'),
build: path.resolve(__dirname, 'build')
};
const common = {
entry: {
app: PATHS.app
},
output: {
path: PATHS.build,
filename: '[name].js'
},
plugins: [
new HtmlWebpackPlugin({ title: 'Webpack demo' })
]
};
var config;
//process.env.npm_lifecycle_event获取npm run 后面的参数名称
switch(process.env.npm_lifecycle_event) {
case 'build':
config = merge(common, {});
break;
default:
config = merge(common, {});
}
module.exports = config;
修改完之后，我们还是通过执行 npm run build执行构建.
验证插件
使用验证插件，在执行前验证我们的配置文件是否正确,这样有利于我们找到问题
安装验证插件
npm i webpack-validator --save-dev
引入配置文件中
...
const validate = require('webpack-validator');
...
module.exports = validate(config);
下一章内容
处理修改文件后使浏览器自动刷新
如果上述文章有什么问题，发现后请留言，本人看到后会立刻修改，以免给后来的童鞋造成错误的引导
本系列文章参考自surviceJS
