【 webpack 】配置的拆分、合并

Webpack配置拆分与合并实践：生产与开发环境

最新推荐文章于 2024-05-09 18:05:48 发布

原创最新推荐文章于 2024-05-09 18:05:48 发布 · 954 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#webpack #javascript #前端

本文介绍了如何根据mode模式拆分webpack.config.js，包括基本配置文件webpack.base.config.js，分别用于生产环境的webpack.pro.config.js和开发环境的webpack.dev.config.js。展示了如何使用webpack-merge合并配置，并在package.json中设置对应环境的构建脚本。

拆分配置

根据mode模式的不同可以将webpack.config.js拆分开来

webpack.base.config.js 基本配置

module.exports = {
	// 配置基本的webpack配置
}

webpack.pro.config.js 生产环境

// 引入基本webpack的配置
const baseConfig = require('webpack.base.config.js')
// 设置生产模式下的配置
const proConfig = {
	mode:"production",
	// 其他的配置
}

webpack.dev.config.js 开发环境

// 引入基本webpack的配置
const baseConfig = require('webpack.base.config.js')
// 设置生产模式下的配置
const devConfig = {
	mode:"development",
	// 其他的配置
}

合并配置

将单独设置的配置与基本配置合并

下载webpack-merge
- npm install webpack-merge -D

// 引入基本webpack的配置
const baseConfig = require('webpack.base.config.js')
const { smart } = require('webpack-merge')
// 设置生产模式下的配置
const proConfig = {
	mode:"production",
	// 其他的配置
}

// 合并
module.exports = smart(baseConfig,proConfig )

// 引入基本webpack的配置
const baseConfig = require('webpack.base.config.js')
const { smart } = require('webpack-merge')
// 设置生产模式下的配置
const devConfig = {
	mode:"development",
	// 其他的配置
}

// 合并
module.exports = smart(baseConfig,devConfig )

设置脚本

package.json

{
	"scriptd":{
		// npm run build
		"build": "webpack --config webpack.pro.config.js",
    	// npm run dev
    	"dev": "webpack --config webpack.dev.config.js",
	}
}