Webpack5 系列（六）：不同模式的区分打包

---

theme: jzman

highlight: atelier-cave-light

一、前言

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

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

1. 开发环境的配置

```js 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: /nodemodules/, 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. 生产环境的配置

```jsx 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

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

插件安装：

bash npm i —save-dev webpack-merge

1. 共用配置

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

```jsx // 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

```jsx // 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

```jsx 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 的设置

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

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

注意：

1. 一般我们会把两个配置文件放在一个叫做 build 的文件夹中。
2. 配置 dev 和 build 命令时，要看清楚 dev 是需要启动本地服务器的，所以要在 webpack 后面添加 serve；而 build 是生产环境打包，不需要开本地服务器，直接写 webpack 进行打包就行。
3. 记得添加 --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

添加我的微信：enjoyMrcat，共同成长，卷卷群里等你 🤪。

以上，感谢您的阅读～