搭建webpack构建环境(2)-分离配置文件

在分离配置文件之前，我们需要安装一个小工具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);

下一章内容

处理修改文件后使浏览器自动刷新

进入下一章-HMR配置

如果上述文章有什么问题，发现后请留言，本人看到后会立刻修改，以免给后来的童鞋造成错误的引导

本系列文章参考自surviceJS