webpack设置环境变量

需求背景
要在js中区分生产环境和开发环境

使用cross-env设置node环境

cross-env可以抹平操作系统差异，设置的环境变量可以在webpack.config.js中使用

安装

yarn add cross-env -D

使用

：package.json

"scripts": {
	//为开发环境注入NODE_ENV
    "dev": "cross-env NODE_ENV=develop webpack-dev-server --progress --colors --inline",
    "build": "webpack -p"
  },

：webpack.config.js

//仅提供思路
const isDev=(process.env.NODE_ENV==='develop')

使用 webpack.DefinePlugin设置浏览器环境

 new webpack.DefinePlugin({
            'env':isDev?JSON.stringify('development'):JSON.stringify('production')
        }),

验证

js直接打印env，可以看到环境差异，不挂在window下