Webpack DefinePlugin

Webpack 的 ​​DefinePlugin()​​​ 函数允许你用另一个令牌替换编译代码中的给定令牌。一个常见的用例是，当您不能直接使用 ​​.env​​ 文件时，使用它来定义环境变量。

假设我们的 ​​.env​​​ 文件有一个 ​​KEY​​ 值：

KEY=123456

我们使用 ​​dotenv​​ 模块，并配置如下 webpack：

'use strict'

const webpack = require('webpack')
require('dotenv').config()

const compiler = webpack({
  entry: {
    app: `${__dirname}/src/main.js`
  },
  output: {
    path: `${__dirname}/public`,
    filename: 'bundle.js'
  },
  plugins: [
    new webpack.DefinePlugin({
      __KEY: `${process.env.KEY}`
    })
  ]
})

编译前：

console.log(__KEY)

编译后：

/******/ (() => { // webpackBootstrap
/******/     "use strict";
var __webpack_exports__ = {};

;// CONCATENATED MODULE: ./app.js
/***/ (() => {

eval("console.log('123456')\r\n\n\n//# sourceURL=webpack://webpack-DefinePlugin/./app.js?");

/***/ })

/******/    });

切换环境

另一个有用的技巧是使用 ​​DefinePlugin()​​​ 在开发和生产服务器 URL 之间切换。例如，假设您希望根据 ​​NODE_ENV​​​ 将前端发出请求的服务器切换到另一个服务器。下面是使用 ​​DefinePlugin()​​ 的方法：

new Webpack.DefinePlugin({
  URL: process.env.NODE_ENV === 'development'
    ? `'http://localhost:3000'`
    : `'https://api.myapp.com'`
})