怎么在Webpack中设置环境变量

  介绍

这篇文章给大家介绍怎么在Webpack中设置环境变量,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。

<强>一、前言

<李>

日常的前端开发工作中,至少会有两套构建环境

<李>

一套开发时使用,构建结果用于本地开发调试,不进行代码压缩,打印调试信息,包含sourcemap文件等

<李>

一套发布时使用,构建结果用于线上,即代码都是压缩过的,运行时不打印调试信息,静态文件不包括sourcemap等

<李>

4.0版Webpack本开始引入了模式的概念

选项描述发展会将process.env。NODE_ENV的值设为发展。启用NamedChunksPlugin和NamedModulesPluginproduction会将process.env。NODE_ENV的值设为生产。启用FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin和UglifyJsPlugin

<强>二、区分开发环境/生产环境的多种方式

<强> 2.1使用命令行

2.1.1写法一

“scripts":, {   ,//默认,mode 为发展   ,“dev1":,“webpack-dev-server"   ,//默认,mode 为,生产,不过这样写,打包的时候会有警告   ,“build1":,“webpack"   }

以脚本脚上本,可以在任意模块内通过process.env。NODE_ENV获取当前的环境变量

但无法在节点环境(webpack配置文件中)下获取当前的环境变量

//, index.js    function  getEnv (), {   ,console.log (process.env.NODE_ENV);//, development  |生产   }//webpack.config.js   const  path =,要求(& # 39;path & # 39;);   const  webpack =,要求(& # 39;webpack& # 39;);      console.log (& # 39; NODE_ENV& # 39;, process.env.NODE_ENV);//未定义      module.exports =, {   ,条目:& # 39;。/src/index.js& # 39;   输出:才能,{   ,,,文件名:& # 39;js/[名字]. js # 39;   ,,},   ,…   };

<>强2.1.2写法二

“scripts":, {   ,“dev2":“webpack ——模式=development"   ,“build2":“webpack ——模式=production"   }

和写法一,是一样的结果

<强> 2.1.3写法三

“scripts":, {   ,“dev3":“webpack-dev-server  - env=development"   ,“build3":“webpack  - env=production"   }

以脚本脚上本,无法在任意模块内通过process.env。NODE_ENV获取当前的环境变量

但可以在节点环境(webpack配置文件中)下,通过函数获取当前环境变量

//, index.js    function  getEnv (), {   ,console.log (process.env.NODE_ENV);//未定义   }//webpack.config.js   const  path =,要求(& # 39;path & # 39;);   const  webpack =,要求(& # 39;webpack& # 39;);      console.log (& # 39; NODE_ENV& # 39;, process.env.NODE_ENV);//未定义//,通过函数获取当前环境变量   module.exports =, (env, argv),=祝辞,{   ,console.log (& # 39; env # 39;, env);//, development  |生产   ,return  {   ,条目:& # 39;。/src/index.js& # 39;   输出:才能,{   ,,,文件名:& # 39;js/[名字]. js # 39;   ,,},   ,…   ,}   };

<强> 2.2使用模式

//, index.js    function  getEnv (), {   console.log才能(process.env.NODE_ENV);//, development  |生产   }//webpack.config.js   const  path =,要求(& # 39;path & # 39;);   const  webpack =,要求(& # 39;webpack& # 39;);      console.log (& # 39; NODE_ENV& # 39;, process.env.NODE_ENV);//未定义      module.exports =, {   ,模式:& # 39;发展# 39;//,development  |生产   ,条目:& # 39;。/src/index.js& # 39;   输出:,,,,{   ,,,,,文件名:,& # 39;js/[名字]. js # 39;   ,,,},   ,,…   };和

2.1中的写法,二是一样的结果

一个是在命令行中设置,一个是在webpack配置文件中设置

<强> 2.3使用webpack。DefinePlugin

首先得知道这个插件的作用:设置全局变量(并非挂载到窗口上),所有模块都能读取到该变量的值

//, index.js    function  getEnv (), {   console.log才能(process.env.NODE_ENV);//发展   console.log才能(NODE_ENV);//生产   }//webpack.config.js   const  path =,要求(& # 39;path & # 39;);   const  webpack =,要求(& # 39;webpack& # 39;);//,这里只是凑巧和环境变量同名了,所以才不会报的错   console.log (& # 39; process.env.NODE_ENV& # 39;, process.env.NODE_ENV);//未定义   console.log (& # 39; NODE_ENV& # 39;, NODE_ENV);//, error  ! ! !      module.exports =, {   ,模式:& # 39;发展# 39;//,development  |生产   ,条目:& # 39;。/src/index.js& # 39;   输出:,,,,{   ,,,,,文件名:,& # 39;js/[名字]. js # 39;   ,,,},   ,插件:[   ,,,,,new  webpack.DefinePlugin ({   ,,,,,& # 39;process.env.NODE_ENV& # 39;: JSON.stringify(& # 39;发展# 39;),   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null

怎么在Webpack中设置环境变量