webpack 配置不同环境变量

根据不同的命令引用不同环境下代码进行打包
e.g: npm run build_dev -> 测试环境打包
npm run build_prod -> 生产环境打包

0.原理

• 环境变量（environment variables）不属于NODE范畴，是操作系统用于设定执行环境的参数，会在程序运行时传递给应用程序。
• node 的process.env属性返回包含用户环境的对象
• process.env.env_name // 获取对应环境变量的值

1. 安装cross-env

• 作用： 使脚本可以跨平台设置和使用环境变量
• 原因： Windows 不支持 NODE_ENV=development的设置方式
• 安装：npm install -D cross-env
• 使用：

{
  "scripts": {
    "build": "cross-env NODE_ENV=production node build/build.js"
  }
}

2. 配置不同环境下的脚本命令

"scripts": {
    "build_dev": "cross-env NODE_ENV=develpment node build/build.js",
    "build_prod": "cross-env NODE_ENV=production node build/build.js"
  }

3. 先看看webpack 的默认配置

• webpack已经默认配置了dev 和 prod
• build/build.js

process.env.NODE_ENV = 'production'
const spinner = ora(`building for procuction...`)

改为：（这里修改的是打包时控台的环境提示）
if (!process.env.NODE_ENV) {
  process.env.NODE_ENV = 'production'
}
const spinner = ora(`building for ${process.env.NODE_ENV}...`)

• build/webpack.dev.conf.js 的默认配置（不需要修改）

 plugins: [
    new webpack.DefinePlugin({
      'process.env': require('../config/dev.env')
    })
]

• build/webpack.prod.conf.js的默认配置（后面要修改）

const env = require('../config/prod.env')

  plugins: [
    new webpack.DefinePlugin({
      'process.env': env
    })
]

• 即：使用DefinePlugin创建一个在编译时可以配置的全局变量，使其可以在项目中以及编译时使用

4.根据NODE_ENV设置build 的env

• build/build.js 会执行build/webpack.prod.js,所以打包的时候是在这里根据process.env.NODE_ENV的不同设置不同的process.env

• build/webpack.prod.conf.js需要修改的地方

let env = require('../config/prod.env')
if(process.env.NODE_ENV === 'development') {
  env = require('../config/dev.env')
} else if (process.env.NODE_ENV === 'production') {
  env = require('../config/prod.env')
}

plugins: [
    new webpack.DefinePlugin({
      'process.env': env
    })
]

5. 差异化配置

• 这时候只需要在 config/dev.env 以及config/prod.env中写配置就可以引用了

---

踩坑1

需要设置静态资源的路径，然后在config/index中设置

build: {
    assetsPublicPath: './'
}

并不能在development环境中打包出正确的路径

• 原因
  webpack.prod.conf.js中是merge了webpack.base.conf.js
prod中的配置是：

const webpackConfig = merge(baseWebpackConfig, {
  mode: 'production',
  output: {
    path: config.build.assetsRoot,
    filename: utils.assetsPath('js/[name].[chunkhash:8].js'),
    chunkFilename: utils.assetsPath('js/[name].[chunkhash:8].js')
  }

并没有publicPath的配置

base中的配置是：

output: {
   path: config.build.assetsRoot,
   filename: '[name].js',
   publicPath:
     process.env.NODE_ENV === 'production'
       ? config.build.assetsPublicPath
       : config.dev.assetsPublicPath
 }

如果环境不是production，使用webpack.dev.conf.js的配置
所以需要在webpack.prod中覆盖掉publicPath

  output: {
    path: config.build.assetsRoot,
    filename: utils.assetsPath('js/[name].[chunkhash:8].js'),
    chunkFilename: utils.assetsPath('js/[name].[chunkhash:8].js'),
    publicPath: './'
  }