1、设置 package.json 的变量值

// 在 package.json 中配置的 node 环境变量只能在指令对应的启动文件中访问到
{
  "scripts": {
    "dev-build": "webpack --config ./build/webpack.config.js",
    "build": "webpack --env.test=production --config ./build/webpack.prod.config.js",
    "serve": "webpack-dev-server --env.test=development --config ./build/webpack.dev.config.js"
  }
}

2、设置对应的启动文件

• a、设置开发环境

const common = require('./webpack.common')
const { merge } = require('webpack-merge')
const webpack = require('webpack')

const devConfig = {
  /**
   * 打包模式配置
   * development 一般为开发环境，打包的代码不压缩
   */
  mode: "development",
  devtool: 'cheap-module-eval-source-map',
  plugins: [
    // 支持 webpack 的 HMR 模块热更新 
    new webpack.HotModuleReplacementPlugin()
  ],
  /**
   * 一般用于开发环境
   * 需要额外安装 webpack-dev-server 依赖
   */
  devServer: {
    // devServer 启的服务器根目录位置
    contentBase: './dist',
    // 开启服务器时，顺便打开浏览器
    // open: true,
    /**
     * 开启接口代理
     * 以 /api 开头的所有 http 请求
     * 全部斗代理到 http://127.0.0.1:5000 中
     * 如 /api/test 的请求编程 http://127.0.0.1:5000/api/test
     */
    proxy: {
      '/api': 'http://127.0.0.1:5000'
    },
    port: 8888,
    /**
     * 开启 Hot Module Replace 模块热更新
     */
    hot: true,
    hotOnly: true
  }
}

// 对象形式导出
// module.exports = merge(common, devConfig)

// 修改成函数的形式导出
module.exports = (env) => {
// 打印出 { test: 'development' }
console.log(env)
return merge(common, devConfig)

• b、设置生产环境

const common = require('./webpack.common')
const { merge } = require('webpack-merge')

const prodConfig = {
  /**
   * 打包模式配置
   * production 一般为生产环境，打包的代码会被压缩
   */
  mode: "production",
  devtool: 'cheap-module-source-map',
}

// 对象形式导出
// module.exports = merge(common, prodConfig)

// 修改成函数的形式导出
module.exports = (env) => {
  // 打印出 { test: 'production' }
  console.log(env)
  return merge(common, prodConfig)
}