《十一》配置分离

原创已于 2025-02-15 09:38:04 修改 · 101 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Webpack

于 2023-10-05 10:38:26 首次发布

Webpack 专栏收录该内容

34 篇文章

订阅专栏

本文介绍了如何使用Webpack根据开发和生产环境分离配置，方法包括使用条件判断或创建单独的配置文件，并展示了如何通过`process.env`在Babel配置中识别当前环境。

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

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

使用相同的配置文件：让 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，就可以根据不同的环境采用不同的配置。

为不同的环境创建不同的配置文件：可以创建一个 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 = {}