webpack——配置环境变量

最新推荐文章于 2025-05-14 11:09:53 发布

沈鑫Real

最新推荐文章于 2025-05-14 11:09:53 发布

阅读量4.3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： webpack

本文链接：https://blog.csdn.net/sxLDWX/article/details/78931125

webpack 专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何通过EnvironmentFlags来控制Webpack打包后的应用程序在不同环境下打印的日志数量，以防止生产环境中出现信息泄露的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在开发过程中我们可能需要打大量的log，便于在开发过程中进行调试。但是当在生产环境中在浏览器中打出这么多日志会造成信息泄漏。

如果在打生产包的时候逐行将log删除，开发时再添加显然是十分麻烦的。为此，我们可以利用Enviroment Flags，在使用webpack打包命令的时候传入对应的参数，告诉程序是否显示log。

无论是使用webpack命令或是webpack-dev-server进行打包，环境变量的传入方法都是一样的。

举个例子:

env DEBUG=true webpack-dev-server

我们可以使用这条命令启动webpack服务器，并传入参数DEBUG参数，参数值为true.

在webpack.config.js文件中，我们可以通过process.env.DEBUG对参数进行接收。

给个完整的例子：

在webpack.config.js中定义一个自定义的插件，在插件中接收DEBUG参数。

var webpack = require('webpack');

var devFlagPlugin = new webpack.DefinePlugin({
  __DEV__: JSON.stringify(JSON.parse(process.env.DEBUG || 'false'))
});

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

在js文件中判断 DEV 的值，并做相应处理：

if (__DEV__) {
  console.log("hello world");
}