Question

有些代码我们只想在开发环境中使用（如 log 的使用），或者只想在内部服务器上使用（如内部员工正测试的功能）。所以，我们需要在代码中使用全局变量来达到目的：

if (__DEV__) {
  console.warn('Extra logging');
}
// ...
if (__PRERELEASE__) {
  showSecretFeature();
}

然后在 webpack 中配置相应的变量：

// webpack.config.js

// definePlugin 接收字符串并插入代码中，所以你可以根据需要写 JS 中的字符串


var definePlugin = new webpack.DefinePlugin({
  __DEV__: JSON.stringify(JSON.parse(process.env.BUILD_DEV || 'true
      ')),
  __PRERELEASE__: JSON.stringify(JSON.parse(process.env.
      BUILD_PRERELEASE || 'false'))
});

module.exports = {
  entry: './main.js',
  output: {
    filename: 'bundle.js'
  },
  plugins: [definePlugin]
};

然后你可以使用 BUILD_DEV=1 BUILD_PRERELEASE=1 webpack 来编译。注意，因为 webpack-p 会执行开发环境代码的清理，任何包含在这种模块中的代码都会被清除，所以你不用担心泄露敏感信息。