webpack打包区分开发和生产环境，设置不同的publicPath

webpack打包区分开发和生产环境，设置不同的publicPath

1、安装 cross-env

npm i -D corss-env

2、package.json中添加环境参数

cross-env NODE_ENV=production 和cross-env NODE_ENV=development`

"scripts": {
    "watch": "webpack --watch",
    "build": "cross-env NODE_ENV=production webpack",
    "dev": "cross-env NODE_ENV=development webpack-dev-server"
}

3、在需要区分环境的地方使用 process.env.NODE_ENV

publicPath: process.env.NODE_ENV === 'production' ? 'http://localhost:8083/20201017' : '/'

拓展：

区分生产、测试、开发环境

package.json

"scripts": {
   "watch": "webpack --watch",
   "build": "cross-env NODE_ENV=production webpack",
   "buildTest": "cross-env NODE_ENV=test webpack",
   "dev": "cross-env NODE_ENV=development webpack-dev-server --hot --inline --watch"
 }

webpack.config.js

const pubcliPathTest = '//test.aixiaodou.cn'
const pubcliPathProd = '//aixiaodou.cn'
const publicPath = process.env.NODE_ENV === 'production' ? pubcliPathProd : process.env.NODE_ENV === 'test' ? pubcliPathTest : '/'

执行npm run buildTest 会打包测试环境
执行npm run build 会打包生产环境
执行npm run dev 开发环境