webpack分环境打包，静态资源部署到不同的服务器上

静态资源部署到独立的服务器可以减轻服务器带宽压力

所谓静态资源：static目录下的文件

项目需求背景：

1. 项目环境分为测试环境、预发布环境、生产环境

2. 不同的环境，静态资源存放的路径不一致，每次打包都需要更改路径，容易忘记切换路径

解决方法：根据不同环境配置不同打包命令，实现路径切换

安装cross-env

npm install cross --save

配置打包命令对应的环境变量

"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "lint": "eslint --ext .js,.vue src",
    "build-test": "cross-env NODE_ENV=test node build/build.js", // 测试
    "build-pre": "cross-env NODE_ENV=pre node build/build.js",  // 预发布
    "build": "cross-env NODE_ENV=production node build/build.js"// 生产
 }

修改config/index.js

不同环境服务器地址
const assetsPath = {
  'test': '//192.16.***.**/test/',
  'pre': '//192.16.***.**/pre/',
  'production' : '//192.16.***.**/production/'
}

build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: assetsPath[process.env.NODE_ENV], // 获取到不同环境的地址
}

// 修改webpack.base.js
const NODE_ENV = process.env.NODE_ENV
output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: (NODE_ENV === 'production' || NODE_ENV === 'test' || NODE_ENV === 'pre') ?
      config.build.assetsPublicPath : config.dev.assetsPublicPath
},

根据不同的环境，执行不同的打包命令

测试环境：npm run build-test

预发布： npm run build-pre

生产： npm run build