Webpack5 系列（六）：不同模式的区分打包 • 寻找莉莉丝

一、前言

上一篇讲到 Tree Shaking 相关的内容，本篇将介绍在不同模式（或称环境）下的打包处理。

二、不同环境下的打包配置

1. 开发环境的配置

const path = require("path");
const HTMLWebpackPlugin = require("html-webpack-plugin");
const webpack = require("webpack");

module.exports = {
	// 模式
	mode: "development",
	// 性能优化 (tree shaking)
	optimization: {
		usedExports: true,
	},
	// source-map
	devtool: "eval-cheap-module-source-map",
	// 入口文件
	entry: "./src/index.js",
	// 开发服务器
	devServer: {
		static: path.resolve(__dirname, "dist"),
		compress: true,
		port: 8080,
		open: true,
		hot: "only",
	},
	// 输出文件
	output: {
		path: path.resolve(__dirname, "dist"),
		filename: "[name].js",
		assetModuleFilename: "assets/[name]_[hash][ext]",
		clean: true,
	},
	// 模块
	module: {
		rules: [
			{
				test: /\.js$/i,
				exclude: /node_modules/,
				use: {
					loader: "babel-loader",
				},
			},
			{
				test: /\.css$/i,
				use: ["style-loader", "css-loader"],
				sideEffects: true,
			},
			// ...
		],
	},
	// 插件
	plugins: [
		new HTMLWebpackPlugin({
			template: "./src/index.html",
		}),
		new webpack.HotModuleReplacementPlugin(),
	],
};

2. 生产环境的配置

const path = require("path");
const HTMLWebpackPlugin = require("html-webpack-plugin");

module.exports = {
	// 模式
	mode: "production",
	// source-map
	devtool: "nosources-source-map",
	// 入口文件
	entry: "./src/index.js",
	// 输出文件
	output: {
		path: path.resolve(__dirname, "dist"),
		filename: "[name].js",
		assetModuleFilename: "assets/[name]_[hash][ext]",
		clean: true,
	},
	// 模块
	module: {
		rules: [
			{
				test: /\.js$/i,
				exclude: /node_modules/,
				use: {
					loader: "babel-loader",
				},
			},
			{
				test: /\.css$/i,
				use: ["style-loader", "css-loader"],
				sideEffects: true,
			},
			// ...
		],
	},
	// 插件
	plugins: [
		new HTMLWebpackPlugin({
			template: "./src/index.html",
		}),
	],
};

通过观察，我们会发现不同模式下的配置实际上存在了大量的重复代码，那么对于这些重复的代码就需要将它们分离出来共用，提高代码效率。

三、webpack-merge

https://www.npmjs.com/package/webpack-merge

这个插件就可以将不同配置合并在一起，也就是可以将共用的配置和不同模式下的配置进行合并，这样就节约了大量的代码书写。

插件安装：

npm i —save-dev webpack-merge

1. 共用配置

新建一个文件 webpack.common.config.js（文件名可以自己起），用于编写共用配置。

// webpack.common.config.js
const path = require("path");
const HTMLWebpackPlugin = require("html-webpack-plugin");

module.exports = {
	// 入口文件
	entry: "./src/index.js",
	// 输出文件
	output: {
		path: path.resolve(__dirname, "dist"),
		filename: "[name].js",
		assetModuleFilename: "assets/[name]_[hash][ext]",
		clean: true,
	},
	// 模块
	module: {
		rules: [
			{
				test: /\.js$/i,
				exclude: /node_modules/,
				use: {
					loader: "babel-loader",
				},
			},
			{
				test: /\.css$/i,
				use: ["style-loader", "css-loader"],
				sideEffects: true,
			},
		],
	},
	// 插件
	plugins: [
		new HTMLWebpackPlugin({
			template: "./src/index.html",
		}),
	],
};

2. 开发环境的配置

新建文件：webpack.dev.config.js

// webpack.dev.config.js
const path = require("path");
const webpack = require("webpack");
const { merge } = require("webpack-merge"); // 插件引入
const commonConfig = require("./webpack.common.config"); // 引入共用配置

const devConfig = {
	// 模式
	mode: "development",
	// 性能优化 (tree shaking)
	optimization: {
		usedExports: true,
	},
	// source-map
	devtool: "eval-cheap-module-source-map",
	// 开发服务器
	devServer: {
		static: path.resolve(__dirname, "dist"),
		compress: true,
		port: 8080,
		open: true,
		hot: true, // 代码变化后，自动刷新页面 (该参数可以不用手动添加，它已经被自动应用于 HMR 插件。)
	},
	// 插件
	plugins: [new webpack.HotModuleReplacementPlugin()],
};

module.exports = merge(commonConfig, devConfig); // 共用配置与开发配置合并

3. 生产环境的配置

新建文件：webpack.prod.config.js

const { merge } = require("webpack-merge"); // 插件引入
const commonConfig = require("./webpack.common.config"); // 引入共用配置

const prodConfig = {
	mode: "production",
	devtool: "nosources-source-map",
};

module.exports = merge(commonConfig, prodConfig); // 共用配置与生产配置合并

四、package.json 的设置

在完成配置以后，我们还需要写一些脚本，方便运行打包。

// package.json
"scripts": {
  "dev": "webpack serve --config ./build/webpack.dev.config.js",
  "build": "webpack --config ./build/webpack.prod.config.js"
}

注意：

一般我们会把两个配置文件放在一个叫做 build 的文件夹中。
配置 dev 和 build 命令时，要看清楚 dev 是需要启动本地服务器的，所以要在 webpack 后面添加 serve；而 build 是生产环境打包，不需要开本地服务器，直接写 webpack 进行打包就行。
记得添加 --config 来自己指定配置文件，同时也要注意文件的路径。

小结

安装 webpack-merge
在 webpack.common.config.js 中编写共用配置
在 webpack.dev.config.js 中编写开发配置，并利用插件与共用配置合并
在 webpack.prod.config.js 中编写生产配置，并利用插件与共用配置合并
配置完成后，编写 npm 脚本指令
更简洁的配置方式可以参考： https://www.npmjs.com/package/webpack-merge
也可以看我的仓库：https://github.com/Knight174/webpack5-learning

以上，感谢您的阅读～