Webpack设置环境变量的一些误区详解
一、前言
- 日常的前端开发工作中,至少会有两套构建环境
- 一套开发时使用,构建结果用于本地开发调试,不进行代码压缩、打印debug信息、包含sourcemap文件等
- 一套发布时使用,构建结果用于线上,即代码都是压缩过的、运行时不打印debug信息、静态文件不包括sourcemap等
- webpack4.0版本开始引入了mode的概念
选项 | 描述 |
---|---|
development | 会将process.env.NODE_ENV的值设为development。启用NamedChunksPlugin和NamedModulesPlugin |
production | 会将process.env.NODE_ENV的值设为production。启用FlagDependencyUsagePlugin,FlagIncludedChunksPlugin,ModuleConcatenationPlugin,NoEmitOnErrorsPlugin,OccurrenceOrderPlugin,SideEffectsFlagPlugin和UglifyJsPlugin |
二、区分开发环境/生产环境的多种方式
2.1使用命令行
2.1.1写法一
"scripts":{ //默认mode为development "dev1":"webpack-dev-server", //默认mode为production,不过这样写,打包的时候会有警告 "build1":"webpack", }
以上script脚本,可以在任意模块内通过process.env.NODE_ENV获取当前的环境变量
但无法在node环境(webpack配置文件中)下获取当前的环境变量
//index.js functiongetEnv(){ console.log(process.env.NODE_ENV);//development|production } //webpack.config.js constpath=require('path'); constwebpack=require('webpack'); console.log('NODE_ENV',process.env.NODE_ENV);//undefined module.exports={ entry:'./src/index.js', output:{ filename:'js/[name].js' }, ... };
2.1.2写法二
"scripts":{ "dev2":"webpack--mode=development", "build2":"webpack--mode=production", }
和写法一,是一样的结果
2.1.3写法三
"scripts":{ "dev3":"webpack-dev-server--env=development", "build3":"webpack--env=production", }
以上script脚本,无法在任意模块内通过process.env.NODE_ENV获取当前的环境变量
但可以在node环境(webpack配置文件中)下,通过函数获取当前环境变量
//index.js functiongetEnv(){ console.log(process.env.NODE_ENV);//undefined } //webpack.config.js constpath=require('path'); constwebpack=require('webpack'); console.log('NODE_ENV',process.env.NODE_ENV);//undefined //通过函数获取当前环境变量 module.exports=(env,argv)=>{ console.log('env',env);//development|production return{ entry:'./src/index.js', output:{ filename:'js/[name].js' }, ... } };
2.2使用mode
//index.js functiongetEnv(){ console.log(process.env.NODE_ENV);//development|production } //webpack.config.js constpath=require('path'); constwebpack=require('webpack'); console.log('NODE_ENV',process.env.NODE_ENV);//undefined module.exports={ mode:'development',//development|production entry:'./src/index.js', output:{ filename:'js/[name].js' }, ... };
和2.1中的写法二,是一样的结果
一个是在命令行中设置,一个是在webpack配置文件中设置
2.3使用webpack.DefinePlugin
首先得知道这个插件的作用:设置全局变量(并非挂载到window上),所有模块都能读取到该变量的值
//index.js functiongetEnv(){ console.log(process.env.NODE_ENV);//development console.log(NODE_ENV);//production } //webpack.config.js constpath=require('path'); constwebpack=require('webpack'); //这里只是凑巧和环境变量同名了,所以才不会报错 console.log('process.env.NODE_ENV',process.env.NODE_ENV);//undefined console.log('NODE_ENV',NODE_ENV);//error!!! module.exports={ mode:'development',//development|production entry:'./src/index.js', output:{ filename:'js/[name].js' }, plugins:[ newwebpack.DefinePlugin({ 'process.env.NODE_ENV':JSON.stringify('development'), 'NODE_ENV':JSON.stringify('production'), }), ], ... };
可以在任意模块内通过process.env.NODE_ENV获取当前的环境变量
但无法在node环境(webpack配置文件中)下获取当前的环境变量
2.4使用cross-env插件
原先我一直以为这个插件,可以用来设置所有环境(浏览器环境、node环境)下的变量。经过测试发现,只能设置node环境下的变量——NODE_ENV
2.4.1写法一
"scripts":{ "dev1":"cross-envNODE_ENV='production'webpack-dev-server", "build1":"cross-envNODE_ENV='development'webpack", }
以上script脚本,可以在任意模块内通过process.env.NODE_ENV获取当前的环境变量
可以在node环境(webpack配置文件中)下,获取当前环境变量
但是会有一个问题:浏览器环境和node环境下获取到的值是不一样的
//!!!!!! //npmrunbuild1 //!!!!!! //index.js functiongetEnv(){ console.log(process.env.NODE_ENV);//production } //webpack.config.js constpath=require('path'); constwebpack=require('webpack'); console.log('process.env.NODE_ENV',process.env.NODE_ENV);//development module.exports={ entry:'./src/index.js', output:{ filename:'js/[name].js' }, ... };
2.4.2写法二
"scripts":{ "dev2":"cross-envNODE_ENV='development'--modedevelopment", "build2":"cross-envNODE_ENV='production'--modeproduction", }
以上script脚本,可以在任意模块内通过process.env.NODE_ENV获取当前的环境变量
可以在node环境(webpack配置文件中)下,获取当前环境变量
所以在能浏览器环境下读取到环境变量的值,靠的是mode,在node环境下读取到环境变量的值,靠的是cross-env
//!!!!!! //npmrunbuild2 //!!!!!! //index.js functiongetEnv(){ console.log(process.env.NODE_ENV);//production } //webpack.config.js constpath=require('path'); constwebpack=require('webpack'); console.log('process.env.NODE_ENV',process.env.NODE_ENV);//production module.exports={ entry:'./src/index.js', output:{ filename:'js/[name].js' }, ... };
三、误区
经常在一些群里看到这个问题:cross-env和webpack.DefinePlugin配合使用的时候,无法通过process.env.xxx来获取到设置的环境变量,需要通过webpack.DefinePlugin里面设置的key来获取。
会引发这个问题的可能原因是:先往cross-env里设置了NODE_ENV变量,然后又到DefinePlugin里设置了一遍环境变量
"scripts":{ "dev":"cross-envNODE_ENV='development'--modedevelopment" }
//index.js functiongetEnv(){ console.log(process.env.NODE_ENV);//development } //webpack.config.js constpath=require('path'); constwebpack=require('webpack'); console.log('process.env.NODE_ENV',process.env.NODE_ENV);//development module.exports={ entry:'./src/index.js', output:{ filename:'js/[name].js' }, plugins:[ newwebpack.DefinePlugin({ //设置环境变量 'process.env.NODE_ENV':JSON.stringify('development'), }), ], ... };
此时会发现浏览器环境和node环境都能获取到设置的变量了,然后就认为之后再设置其他的全局变量时,也像这样写就行了。
认为cross-env和DefinePlugin是配套一起使用的,这个看法本身就很奇怪,因为两者的作用点不一样
- DefinePlugin的作用:是设置浏览器环境下能读取到的"全局变量",直接通过key读取,在node环境下是无法读取到的
- cross-env的作用:是通过命令行设置环境变量NODE_ENV,使node环境下能读取到,通过process.env.NODE_ENV读取
- 如果在DefinePlugin里设置的key是process.env.NODE_ENV,会覆盖webpack通过mode模式设置的环境变量的值
"scripts":{ "dev":"cross-envNODE_ENV='development'--modedevelopment" }
//index.js functiongetEnv(){ console.log(process.env.NODE_ENV);//666666 } //webpack.config.js constpath=require('path'); constwebpack=require('webpack'); console.log('process.env.NODE_ENV',process.env.NODE_ENV);//development module.exports={ entry:'./src/index.js', output:{ filename:'js/[name].js' }, plugins:[ newwebpack.DefinePlugin({ //注意:因为同名的key,这里的值会覆盖默认的值!!!!!! 'process.env.NODE_ENV':JSON.stringify('666666'), }), ], ... };
四、总结
cross-env是专门用来设置node环境变量的
webpack.DefinePlugin是专门用来设置浏览器环境下的全局变量(不会挂载到window上)
本文只是我个人的理解,如有错误还请告知,万分感谢
好了,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对毛票票的支持。
声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:czq8825#qq.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。