拆分开发环境配置和生产环境配置

1.公共路径 publicPath
publicPath: “ http://localhost:8080/“, //所有资源的基础路径

2.环境变量
webpack —env production —env goal=local

mode: env.production ? ‘production’ :’development’,

3.使用不同的环境配置
webpack -c ./config/webpack.config.dev.js (—config)
webpack —config ./config/webpack.config.prod.js

4.公共配置
提取公用的配置代码到common.js中
合并配置

const {merge} = require('webpack-merge')
const commonConfig = require('./webpack.config.common.js')
const productionConfig = require('./webpack.config.prod.common.js')
const developmentConfig = require('./webpack.config.dev.common')
// 合并后
module.exports = (env) => {
    console.log('合并后',env);
    switch (true){
        case env.development:
            return merge(commonConfig,developmentConfig)
        case env.production:
            return merge(commonConfig,productionConfig)
        default:
            return new Error('No matching configuration was found')
    }
}

5.npm脚本

  "scripts": {
    "start": "webpack serve --config ./config/webpack.config.js --env development",
    "build": "webpack serve --config ./config/webpack.config.js --env production"
  },