[JavaScript知识库]【 webpack 】配置的拆分、合并

拆分配置

根据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",
	}
}