第 6 卷

第 6 / 26 卷日期：2026-01-02

• 资源托管： webpack-dev-server 将打包后的资源托管在内存中（而非写入磁盘），减少磁

启用热更新的基本配置

Code block

1const webpack = require('webpack');

2const HtmlWebpackPlugin = require('html-webpack-plugin');

3 4module.exports = {

5mode: 'development', 6devServer: {

7hot: true, // 启用热更新 8open: true, // 自动打开浏览器

9port: 3000 // 开发服务器端口 10},

11plugins: [ 12new HtmlWebpackPlugin({ template: './public/index.html' }),

13new webpack.HotModuleReplacementPlugin() // 启用 HMR 插件（Webpack 4+ 需手动引入，Webpack 5+ 可省略，devServer.hot 为 true 时自动启用）

14] 15}

九、代码分割(Code Splitting) 在Webpack中是如何实现的?

代码分割（Code Splitting）是 Webpack 核心优化手段之一，核心目标是“将大体积的 bundle 拆分为多个小体积的 chunk（代码块）”，实现“按需加载”（如路由切换时加载对应模块）或“并行加

载”（如首屏加载时同时加载核心模块和第三方依赖），从而减少首屏加载时间，提升用户体验。

Webpack 实现代码分割主要有三种核心方式，覆盖不同场景需求。

方式一：基于入口的代码分割（Entry Splitting）

通过配置多个入口文件，将不同页面或功能模块的代码拆分为独立的 chunk，适用于多页面应用（MPA）或功能独立的模块拆分。

• 核心配置：通过 entry 配置多个入口，配合 output.filename 自定义 chunk 命名，同时可

通过 optimization.splitChunks 提取公共依赖（避免重复打包）。

Code block

1module.exports = { 2entry: {

3home: './src/home.js', // 首页入口

10}, 11optimization: {

12splitChunks: {

13	chunks: 'all', //提取所有chunk的公共依赖
14	cacheGroups: {
15	vendor: { //提取第三方依赖（如react、lodash）
16	test: /[\\/]node_modules[\\/]/,
17	name: 'vendors',
18	priority: -10
19	}
20	}
21	}
22	}
23 }

效果：生成 home.js、 about.js（页面专属代码）和 vendors.js（公共第三方依赖），避免第三方依赖在多个入口中重复打包。

方式二：动态导入（Dynamic Import）实现按需加载

通过 ES 模块的动态导入语法（ import()，返回 Promise），在代码运行时（如用户点击按钮、路由切换）动态加载所需模块，适用于单页面应用（SPA）的路由拆分、大型组件按需加载等场景。

Webpack 会自动将动态导入的模块拆分为独立的 chunk。

• 核心用法：

Code block

1	// 1.路由按需加载（以React Router为例）
2	import { lazy, Suspense } from 'react';
3	const About = lazy(() => import('./About')); //动态导入About组件，Webpack自动

拆分该模块为独立 chunk 4

5function App() { 6return (

7	<Suspense fallback={<div>Loading...</div>}>
8	<Routes>
9	<Route path="/about" element={<About />} />
10	</Routes>
11	</Suspense>
12	);

19});

• 自定义 chunk 名称：通过 /* webpackChunkName: "chunk-name" */ 注释指定 chunk

名称，便于调试和管理：

Code block

1const About = lazy(() => import(/* webpackChunkName: "about" */ './About'));

2// 生成的 chunk 名称为 about.[contenthash].js

方式三：通过 splitChunks 配置自动分割公共代码

Webpack 4+ 提供 optimization.splitChunks 配置，可自动识别并提取多个模块间的公共代码（如项目内公共组件、工具函数）和第三方依赖，拆分为独立的 chunk，避免代码冗余。这是最常

用的代码分割方式，适用于单页面和多页面应用。

• 核心配置（全量优化）：

Code block

1module.exports = { 2optimization: {

3splitChunks: {

4	chunks: 'all', //作用于所有chunk（入口chunk +动态导入的chunk）
5	minSize: 20000, //拆分的chunk最小体积（20kb，小于此值不拆分）
6	minRemainingSize: 0, //确保拆分后剩余的chunk体积不为0
7	minChunks: 2, //一个模块被至少2个chunk引用时才拆分
8	maxAsyncRequests: 30, //动态导入时的最大并行请求数
9	maxInitialRequests: 30, //入口chunk的最大并行请求数
10	enforceSizeThreshold: 50000, //超过50kb的chunk强制拆分
11	cacheGroups: {
12	//缓存组：定义拆分规则，优先级从高到低
13	defaultVendors: { //拆分第三方依赖（优先级高于default）
14	test: /[\\/]node_modules[\\/]/,
15	priority: -10, //优先级（数值越大优先级越高）
16	reuseExistingChunk: true, //复用已存在的chunk，避免重复拆分
17	name: 'vendors' //拆分后的chunk名称
18	},
19	default: { //拆分项目内公共代码
20	minChunks: 2,
21	priority: -20,

全站分卷索引 · 26 卷