第 5 卷

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

2 3module.exports = {

4module: { 5rules: [

6{ 7test: /\.css$/,

8use: [

9	MiniCssExtractPlugin.loader, //替代style-loader，提取CSS为文件
10	'css-loader'
11	]
12	}
13	]
14 },
15 plugins: [
16	new MiniCssExtractPlugin({
17	filename: 'css/[name].[contenthash].css' //输出CSS文件路径及命名（带哈希缓

存）

18})

19] 20}

处理Sass（SCSS）的核心配置

Sass 是 CSS 预处理器，需先将其转译为 CSS 再进行后续处理，核心依赖 sass-loader 和 Sass 编译器（ sass 或 node-sass，推荐 sass）。

• 步骤1：安装依赖：

npm install sass-loader sass css-loader style-loader mini-cssextract-plugin --save-dev

• 步骤2：Webpack配置：

与处理 CSS 类似，仅需在 loader 链中添加 sass-loader（置于 css-loader 之前）：

Code block

1const MiniCssExtractPlugin = require('mini-css-extract-plugin');

2 3module.exports = {

4module: { 5rules: [

6{ 7test: /\.(scss|sass)$/, // 匹配 .scss 和 .sass 文件

11	'sass-loader' //将Sass转译为CSS（依赖sass编译器）
12	]
13	}
14	]
15 },
16 plugins: process.env.NODE_ENV === 'production' ? [
17	new MiniCssExtractPlugin({
18	filename: 'css/[name].[contenthash].css'
19	})
20 ] : []
21 }

额外优化：CSS兼容性处理（autoprefixer）

为保证 CSS 在不同浏览器中的兼容性，需配合 postcss-loader 和 autoprefixer 自动添加浏览器前缀，配置如下：

• 安装依赖：

npm install postcss-loader autoprefixer --save-dev

• 添加 postcss 配置文件（postcss.config.js）：

Code block

1module.exports = { 2plugins: [

3require('autoprefixer') // 自动添加浏览器前缀，依赖 package.json 中的 browserslist 配置

4] 5}

• 更新 Webpack loader 配置（在 css-loader 和 sass-loader 之间添加 postcss-

loader）：

Code block

1use: [ 2process.env.NODE_ENV === 'production' ? MiniCssExtractPlugin.loader : 'style-

loader', 3'css-loader',

4'postcss-loader', // 兼容性处理

Webpack 热更新（Hot Module Replacement，HMR）是开发环境的核心功能，实现“代码修改后无需刷新整个页面，仅更新变化的模块”，大幅提升开发效率。其核心依赖 webpack-dev-server

（开发服务器）和 HotModuleReplacementPlugin（HMR 插件），工作原理可拆解为“监控- 通知-更新”三个核心环节。

热更新核心工作流程
启动开发服务器，建立通信通道：

运行 webpack-dev-server 时，会启动一个 HTTP 服务器（用于托管项目资源）和一个

WebSocket 服务器（用于客户端与服务端的实时通信）；

客户端（浏览器）加载项目时，会与 WebSocket 服务器建立连接，保持双向通信。

监听文件变化，生成更新资源：

Webpack 启动时会构建项目，并通过文件系统监听器（如 chokidar）监听源码文件（JS、

CSS、Sass 等）的变化；

当文件被修改时，Webpack 会触发重新编译，但仅编译变化的模块（而非全量编译），生成两个

关键文件：

manifest.json：记录本次更新的模块标识（module ID）和更新资源的路径；
update chunk：变化模块对应的更新代码块（如 0.hot-update.js）。

服务端通知客户端更新：

Webpack 编译完成后，通过 WebSocket 向客户端发送“更新通知”，并告知

manifest.json 的路径。

客户端请求更新资源，执行模块替换：

客户端接收到通知后，通过 HTTP 请求获取 manifest.json，解析出需要更新的模块及对应

的 update chunk；

客户端进一步请求并加载 update chunk，然后调用 HMR 运行时（嵌入在 bundle 中的 HMR

代码）执行模块替换：

先卸载旧模块（执行模块的 dispose 钩子，清理资源，如事件监听、定时器等）；
再加载新模块（执行模块的 accept 钩子，将新模块替换到应用中）；
若模块替换成功，页面无刷新更新；若替换失败（如核心模块修改），HMR 会降级为刷新整个页

面。

核心原理总结

通信基础：基于 WebSocket 实现服务端与客户端的实时通信，确保更新通知能快速传递。
增量编译：仅重新编译变化的模块，而非全量构建，减少编译时间，提升更新效率。

• 运行时替换：通过 HMR 运行时管理模块的加载、卸载与替换，核心是“接受更

全站分卷索引 · 26 卷