《十一》配置分离

目前，不管是开发环境的配置信息还是生产环境的配置信息都写在一起，其实可以根据环境进行配置的分离，就可以在打包时采用不同的配置进行打包了。

让 Webpack 根据不同的环境在打包时采用不同的配置进行打包，一般来说有两种方式：

1. 使用相同的配置文件：让 Webpack 不管在什么环境下都使用同一个配置文件，只是在运行打包命令时将当前环境作为变量传递进去，在配置文件中通过条件判断来决定哪个环境使用哪些配置。

   // webpack.config.js
   // modules.expoers 导出一个函数，接收一个变量作为参数，返回值是一个对象
   module.exports = function(env) {
     const isProduction = env.production
     return {
       output: {
   			filename: isProduction ? 'bundle@[chunkhash].js' : 'bundle.js'
   		},
     }
   }
   

   在运行 webpack 命令进行打包时，增加 --env production 或者 --env development 参数，在 webpack.config.js 配置文件中的 env.production 或者 env.development 就会为 true，就可以根据不同的环境采用不同的配置。
2. 为不同的环境创建不同的配置文件：可以创建一个 webpack.common.config.js 配置文件编写共同的配置信息，创建一个webpack.production.config.js 配置文件编写生产环境的配置信息，创建一个 webpack.development.config.js 配置文件编写开发环境的配置信息。

   // webpack.common.config.js
   // 需要安装并引入 webpack-merge 库，用来合并 Webpack 的配置信息
   const {merge} = require('webpack-merge')
   // 引入生产环境的配置信息
   const prodCongig = require('./webpack.production.config.js')
   // 引入开发环境的配置信息
   const devConfig = require('./webpack.development.config.js')
   // 公共的配置信息
   const commonConfig = {
       entry: './src/index.js'
   }
   
   module.exports = function(env) {
     const isProduction = env.production
     return isProduction ? merge(commonConfig, prodCongig) : merge(commonConfig, devConfig)
   }
   

   在运行 webpack 命令进行打包时，增加 --config 参数指定打包时使用的配置文件是 webpack.common.config.js，增加 --env 指定当前环境，就可以根据不同的环境采用不同的配置。

如果 Babel 的配置文件也需要进行环境分离的话，可以给 process.env 增加一个属性CURR_ENV，然后在 Webpack 的配置文件中根据不同的环境为 process.env.CURR_ENV 进行赋值，就可以在 Babel 的配置文件中获取到当前的环境了。

process 是 Node 中的一个全局对象，提供了与当前进程和运行时环境交互的方法和属性。
process.env 有一点比较特殊，不管为它的属性赋予任何类型的值，Node 都会将其转为字符串类型。

// webpack.config.js
module.exports = function(env) {
  const isProduction = env.production
  process.env.CURR_ENV = isProduction ? 'production' : 'development'
  
  return {}
}

// babel.config.js
const isProduction = process.env.CURR_ENV === 'production'
module.exports = {}