目前,不管是开发环境的配置信息还是生产环境的配置信息都写在一起,其实可以根据环境进行配置的分离,就可以在打包时采用不同的配置进行打包了。
让 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
参数指定打包时使用的配置文件,就可以根据不同的环境采用不同的配置。
如果 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 = {}