webpack设置环境变量

97 阅读1分钟

需求背景
要在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下