webpack4多环境变量问题

前一阵自己手动搭了一套基于webpack4和vue的前端框架，当时并没有考虑很多，以为dev和pro两个环境变量就够用了，但是到了工作中只有这两个还是不够的。于是做了以下调整。 package.json

"scripts": {
    "build": "webpack --config build/webpack.pro.conf.js",
    "dev": "webpack-dev-server --config build/webpack.dev.conf.js",
    "test": "webpack --env.myENV=test --config build/webpack.pro.conf.js"
  },

在test命令中增加了--env参数，并在webpack中获取。 webpack.pro.conf.js

module.exports = (env = '', argv) => {
  // 尝试获取npm中自定义的环境变量，如果不存在就设置为production， 存在就替换为自定义环境变量
  const myENV = env == '' ? JSON.stringify('production') : JSON.stringify(`${env.myENV}`)
  .........
}

获取后需要使用webpack.DefinePlugin进行重新配置

plugins: [
  // mode 模式只有 development和production两种，需使用插件在打包时替换process.env.NODE_ENV
  new webpack.DefinePlugin({
    'process.env.NODE_ENV': myENV
  }),
  ........
]

之后就可以通过判断环境变量进行域名地址切换了

let Url = ''
switch (process.env.NODE_ENV) {
  case 'development':
    Url = 'http://0.0.0.0'
    break
  case 'test':
    Url = 'http://1.1.1.1'
    break
  case 'production':
    Url = 'http://2.2.2.2'
    break
}
console.log('环境',process.env.NODE_ENV, '结果',Url)

其实本可以通过增加配置文件的方式来处理这一问题，但是随着环境变量的增多，配置文件也会逐渐增多（我这种强迫症，只能接受三个配置文件），所以决定使用以上的方式进行处理。

以上，记录。