第 9 卷

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

（4）使用示例

Code block

1// 模块 utils.js（ES Module）

2export const add = (a, b) => a + b; // 被引用，保留 3export const subtract = (a, b) => a - b; // 未被引用，被树摇删除

4 5// 入口 index.js

6import { add } from './utils'; // 仅导入 add 7console.log(add(1, 2));

打包后， subtract 函数会被 Tree Shaking 删除，bundle 中仅保留 add 函数相关代码。

十二、Webpack如何与Babel一起工作来转译JavaScript ES6+ 代码?

Webpack 本身仅能处理标准 JavaScript 模块，无法直接解析 ES6+ 高级语法（如箭头函数、解构赋值、class、async/await 等）和 JSX 语法。Babel 是专门的 JavaScript 转译工具，可将 ES6+ 代码转

译为浏览器兼容的 ES5 代码。Webpack 与 Babel 协同工作的核心是通过 babel-loader 将 Babel 集成到 Webpack 的打包流程中，实现“模块解析→语法转译→打包输出”的全链路处理。

协同工作的核心流程
Webpack 启动打包，根据 module.rules 配置，通过 test: /\.js$/ 匹配所有

JavaScript 文件。

Webpack 调用 babel-loader 处理匹配到的 JS 文件， babel-loader 作为桥梁，将文件

传递给 Babel 进行转译。

Babel 读取项目中的 Babel 配置（如 babel.config.json 或 .babelrc），加载对应的转

译插件（如 @babel/plugin-transform-arrow-functions）和预设（如 @babel/preset-env）。

Babel 将 ES6+ 代码转译为 ES5 代码，完成语法降级。

5.babel-loader 将转译后的 ES5 代码返回给 Webpack，Webpack 继续进行模块依赖解析、打包等后续流程。

具体配置步骤

（1）安装核心依赖

• babel-loader：Webpack 与 Babel 之间的连接器，让 Webpack 能调用 Babel 转译 JS 文

件。

@babel/core：Babel 的核心转译引擎，负责解析和转换 JavaScript 代码。

• @babel/preset-env：Babel 预设集合，包含了 ES6+ 转 ES5 的所有必要插件，可根据目标

浏览器自动适配转译规则。

（2）配置 Webpack（webpack.config.js）

Code block

1module.exports = { 2module: {

3rules: [ 4{

5	test: /\.js$/, //匹配所有.js文件
6	exclude: /node_modules/, //排除第三方依赖（无需转译，节省时间）
7	use: {
8	loader: 'babel-loader', //使用babel-loader处理
9	options: {
10	cacheDirectory: true, //启用缓存，避免重复转译，提升构建速度
11	}
12	}
13	}
14	]
15 }
16 }

（3）配置 Babel（babel.config.json）

在项目根目录创建 Babel 配置文件，指定转译规则：

Code block

1{ 2"presets": [

3[ 4"@babel/preset-env",

5{ 6"useBuiltIns": "usage", // 自动导入所需的 polyfill（如 Promise、

Array.prototype.includes）

7"corejs": 3, // 指定 core-js 版本（用于提供 polyfill）

13] 14]

15}

• useBuiltIns: "usage"：避免全量导入 polyfill，仅导入项目中实际使用的特性，减小

bundle 体积。

• corejs：ES6+ 特性的 polyfill 库，需单独安装： npm install core-js@3 --save（生

产依赖，因为运行时需要）。

（4）扩展：转译 React JSX 语法

若项目使用 React，需额外安装 @babel/preset-react 转译 JSX 语法：

Code block

1// 安装依赖 2npm install @babel/preset-react --save-dev

3 4// 更新 babel.config.json

5{ 6"presets": [

7"@babel/preset-env",

8	"@babel/preset-react" //新增React预设
9	]
10 }

十三、解释Webpack的模块热替换 (HMR)与传统的全页面刷新之间的区别。

模块热替换（Hot Module Replacement，HMR）和传统全页面刷新都是开发环境中代码修改后的更新方式，核心目标是让开发者看到代码变更的效果，但二者在更新效率、用户状态保留、开发体验等

方面差异显著，HMR 是对传统全页面刷新的优化升级。

核心区别对比

对比维度	模块热替换（HMR）	传统全页面刷新
更新范围	仅更新变化的模块（如修改	刷新整个页面，重新加载所有
	的 JS 组件、CSS 样式），不	资源（HTML、CSS、JS、图
	影响其他模块和页面整体状	片等），重置页面所有状态。

全站分卷索引 · 26 卷