DefinePlugin

DefinePlugin允许在 编译时 将你代码中的变量替换为其他值或表达式。

语法

---

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

场景

---

配置环境变量

通过cross-env可以改变node环境中的process.env.NODE_ENV，那么可以通过DefinePlugin将node中的process.env.NODE_ENV传递给浏览器，供浏览器区分环境

1. package.json 通过cross-env 配置环境变量命令

{
  "scripts": {
    "dev": "cross-env NODE_ENV=dev webpack server",
    "build": "cross-env NODE_ENV=prod webpack"
  },
}

2. webpack.config.js 配置DefinePlugin,传递环境变量

const webpack = require("webpack");

module.exports = {
  plugins: [
    new webpack.DefinePlugin({
      env: JSON.stringify(process.env.NODE_ENV),
    }),
  ],
};

3. 入口文件index.js使用环境变量

console.log(env)