09-webpack5学习-使用webpack-merge区分环境打包

项目结构

webpackMergeConfig
│  package-lock.json
│  package.json
└─webpackConfig
│      webpack.dev.js
│      webpack.pro.js
│      webpack.base.js
└─src
		index.css
        index.js
        index.css

安装依赖

在webpackDevServer目录下运行

npm i webpack webpack-cli html-webpack-plugin css-loader style-loader mini-css-extract-plugin webpack-merge --save-dev

webpack相关配置文件

webpack.base.js

const { resolve } = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
	entry:resolve(__dirname,"../src/index.js");
	output:{
		path:resolve(__dirname,"../dist"),
		filename:"[name].js"
	},
	plugins:[new HtmlWebpackPlugin()]
}

webpack.dev.js

const { merge } = require("webpack-merge");
const baseWebpackConfig = require("./webpack.base.js");
const devWebpackConfig = merge(baseWebpackConfig,{
	mode:"development",
	module:{
		rules:[
			{
				test:/\.css$/i,
				use:["style-loader","css-loader"]
			}
		]
	},
})
module.exports = devWebpackConfig;

webpack.pro.js

const { merge } = require("webpack-merge");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCssAssetsWebpackPlugin = require("optimize-css-assets-webpack-plugin");
const baseWebpackConfig = require("../webpack.base.js");
const proWebpackConfig = merge(baseWebpackConfig,{
	mode:"production",
	module:{
		rules:[
			{
				test:/\.css$/i,
				use:[MiniCssExtractPlugin.loader,"css-loader"]	
			}	
		]
	},
	plugins:[
		new MiniCssExtractPlugin({filename:"[name].css"}),
		new OptimizeCssAssetsWebpackPlugin()
	]
})

本地打包命令

• 方式一：在webpackMergeConfig目录下运行

// 开发环境
webpack --config ./webpackConfig/webpack.dev.js
// 生产环境
webpack --config ./webpackConfig/webpack.pro.js

• 方式二：在package.json文件的scripts属性新增如下命令

{
	...
	"scripts":{
		"build":"webpack --config ./webpackConfig/webpack.dev.js",
		"build:pro":"webpack --config ./webpackConfig/webpack.pro.js"
	}
	...
}

修改保存后，在webpackMergeConfig目录下运行如下命令：

// 开发环境
npm run build
// 生产环境
npm run build:pro