webpack4 - 配置文件分离（详细教程）

webpack根据开发和生成环境一般可以将配置文件拆分，拆分dev和prod两种环境

|- package.json|- /build|- webpack.base.js|- webpack.dev.js|- webpack.prod.js

在scripts里修改相应的命令

"dev": "webpack-dev-server --config build/webpack.dev.js",
"build": "webpack --config build/webpack.prod.js"

使用webpack-merge,用以合并通用配置文件与开发环境配置文件

// webpack.dev.js
const path = require('path');
const webpack = require('webpack');
const merge = require('webpack-merge');
const baseWebpackConfig = require('./webpack.base');module.exports = merge(baseWebpackConfig, {mode: 'development',devServer: {host: '127.0.0.1',port: 80,contentBase: path.join(__dirname, 'dist'),open: false,hot: false,disableHostCheck: true,proxy: {},before () {}},plugins: [// 启用 HMRnew webpack.HotModuleReplacementPlugin({})]
});

// webpack.prod.js
const baseWebpackConfig = require('./webpack.base');
module.exports = merge(baseWebpackConfig, {mode: 'production'
});