Webpack 4.0新环境变量设置方法大揭秘

告诉你个事儿。用上最新版的Webpack 4.0后，我们就没法像以前那样通过process.env.NODE_ENV来读取环境变量，这下可真让人头疼！

"scripts": {
 // 默认 mode 为 development
 "dev1": "webpack-dev-server",
 // 默认 mode 为 production，不过这样写，打包的时候会有警告
 "build1": "webpack",
}

// index.js 
function getEnv() {
 console.log(process.env.NODE_ENV);// development | production
}
// webpack.config.js
const path = require('path');
const webpack = require('webpack');
console.log('NODE_ENV',process.env.NODE_ENV);// undefined
module.exports = {
 	entry:'./src/index.js',
  output: {
   filename: 'js/[name].js'
  },
 		...
};

为啥说这个重要？你可能想不到，其实我们可以从Webpack选项里的函数获取到当下的环境变量。但请注意，设置环境变量在终端跟Webpack配置文件里可是大不相同的！因此，有时候在不同时期的模块中使用process.env.NODE_ENV就会出问题了！

"scripts": {
 "dev2": "webpack --mode=development",
 "build2": "webpack --mode=production",
}

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

别急，试试Webpack的DefinePlugin！把全局变量定义出来，全船员都能看见哦（记得千万别放到window上去）。而在Node环境里（也就是我们设置Webpack的时候啦），没法直接拿到环境变量，但是用process.env.NODE_ENV就能搞定了！是不是超级简单~

// index.js 
function getEnv() {
 console.log(process.env.NODE_ENV);// undefined
}
// webpack.config.js
const path = require('path');
const webpack = 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'
  },
 		...
 }
};

咱再说最后一次这个事真的很重要！一开始我以为DefinePlugin应该能解决所有环境分配变量的问题，但可惜事实上他只能在Node环境中使用，比如说那个叫NODE_ENV的参数就是搞不定的。后来又发现了个新问题，浏览器和Node环境获取的变量值竟然差异那么大！真是让人头疼

// index.js 
function getEnv() {
  console.log(process.env.NODE_ENV);// development | production
}
// webpack.config.js
const path = require('path');
const webpack = 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'
    },
  		...
};

咋整？挺简单的！用mode就让浏览器自动读出来了，但用node的话得用上cross-env。不过，如果你同时用了这俩还发现找不到设好的那啥环境变量，别急，就直接用他们指定的关键词去找就是。是不是感觉有点烦琐？

// index.js 
function getEnv() {
  console.log(process.env.NODE_ENV);// development
  console.log(NODE_ENV);// production
}
// webpack.config.js
const path = require('path');
const webpack = 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:[
      new webpack.DefinePlugin({
      	'process.env.NODE_ENV':JSON.stringify('development'),
        'NODE_ENV':JSON.stringify('production'),
    }),
  ],
  		...
};

听说过吗？有人说cross-env和DefinePlugin得搭档着用，但其实它们各有专长！Cross-env专注搞定Node这边的环境变量，而 DefinePlugin则是专程在浏览器环境里建立全局变量哦（而且还是不经过 window 的那种）。听完是不是感觉挺有意思呀？

你是不是想知道为啥要用这俩环境变量？其实就是为了让地址能在《Cross-Env》那儿调好，然后再靠《DefinePlugin》把剩下的那块儿搞定。无论你是用浏览器还是在Node里，都能直接跑到咱们预设的地方。不过注意咯，之后再弄别的全局变量可不能乱来为啥咧？因为两个家伙的工作方式可不一样呐！其实挺有趣的！

搞定，终于学会怎么利用Webpack的DefinePlugin来读取环境变量了！还要注意区分Cross-Env和DefinePlugin！希望这个有用，遇到问题尽管找我感谢参与讨论，之前都聊过头的问题，Webpack 4.0的模式究竟是怎么回事儿？为啥不能在模块里直接获取环境变量？那现在咋办？想了解答案就快加入我们学习！

"scripts": {
 	"dev1": "cross-env NODE_ENV='production' webpack-dev-server",
    "build1": "cross-env NODE_ENV='development' webpack",
}

// ！！！！！！
// npm run build1 
// ！！！！！！
// index.js 
function getEnv() {
  console.log(process.env.NODE_ENV);// production
}
// webpack.config.js
const path = require('path');
const webpack = require('webpack');
console.log('process.env.NODE_ENV',process.env.NODE_ENV);// development
module.exports = {
 	entry:'./src/index.js',
    output: {
      filename: 'js/[name].js'
    },
  		...
};