使用DefinePlugin通过NODE_ENV配置环境变量

使用DefinePlugin可以在编译阶段根据NODE_ENV自动配置环境变量，提升前端开发效率。

DefinePlugin的用法：

每个传进 DefinePlugin 的键值都是一个标志符或者多个用 . 连接起来的标志符，它可以配置多个环境变量。

• 如果这个值是一个字符串，它会被当作一个代码片段来使用。
• 如果这个值不是字符串，它会被转化为字符串(包括函数)。
• 如果这个值是一个对象，它所有的 key 会被同样的方式定义。
• 如果在一个 key 前面加了 typeof,它会被定义为 typeof 调用。

这些值会被内联进那些允许传一个代码压缩参数的代码中，从而减少冗余的条件判断。

new webpack.DefinePlugin({
  PRODUCTION: JSON.stringify(true),
  VERSION: JSON.stringify("5fa3b9"),
  BROWSER_SUPPORTS_HTML5: true,
  TWO: "1+1",
  "typeof window": JSON.stringify("object")
})

注意，因为这个插件直接执行文本替换，给定的值必须包含字符串本身内的实际引号。通常，有两种方式来达到这个效果，使用 ' "production" ' , 或者使用 JSON.stringify("production")。

如何使用DefinePlugin：

1、在package.json文件里，设置NODE_ENV的值

  "scripts": {
    "build-dev": "cross-env NODE_ENV=development webpack --display-chunks --progress --colors --profile --bail",
    "build-test": "cross-env NODE_ENV=test webpack -p --display-chunks --progress --colors --profile --bail",
    "build-pro": "cross-env NODE_ENV=production webpack -p --display-chunks --progress --colors --profile --bail",
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open"
  }

2、新建processENV.js文件，配置每个环境下各自需要的环境变量

const NODE_ENV = process.env.NODE_ENV;
const config = {
  development: {
    API_CONFIG: "development"
  },
  production: {
    API_CONFIG: "production"
  },
  test: {
    API_CONFIG: "test"
  }
};
module.exports = config[NODE_ENV];

3、在webpack的构建文件里使用webpack.DefinePlugin：

const webpack = require("webpack");
const processENV = require("./processENV");
module.exports = {
  entry: {...},
  resolve: {
    ...
  },
  module: {
    rules: [
      ...
    ]
  },
  plugins: [
    new webpack.DefinePlugin({
      processENV: JSON.stringify(processENV)
    })
  ]
};

4、在src文件里的所有文件都可以访问processENV

<template>
  <div>
    
  </div>
</template>
<script>
//src下的所有文件都可以直接访问processENV变量
export default {
  props: ['columns'],
  data() {
    return {
      testData:processENV
    };
  },
  methods: {
    test() {
       console.log(processENV)
    }
  }
};
</script>