第 4 卷

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

• 使用 ESBuild 替代 Babel/Terser（可选）：

ESBuild 是基于 Go 开发的构建工具，速度远超 Babel/Terser，可通过 esbuild-loader 实现 JS 转译与压缩，进一步提升打包速度：

Code block

1const ESBuildPlugin = require('esbuild-webpack-plugin');

2const ESBuildMinimizerPlugin = require('esbuildloader').ESBuildMinimizerPlugin;

3 4module.exports = {

5module: { 6rules: [

7{ 8test: /\.js$/,

9loader: 'esbuild-loader', 10options: {

11target: 'es2015', // 目标 ES 版本 12}

13} 14]

15}, 16optimization: {

17minimizer: [

18	new ESBuildMinimizerPlugin(),// ESBuild压缩JS
19	],
20	},
21	plugins: [
22	new ESBuildPlugin(),
23	]
24 }

总结

npm 安装包的核心流程：解析参数→版本锁定→构建依赖树→缓存检查→下载/复用缓存→解压安

装→更新配置与执行脚本；

包管理工具核心对比：pnpm（速度最快+磁盘最少+隔离最好）> yarn（缓存+monorepo友好）>

cnpm（国内网络优化）> npm（原生兼容最好）；

pnpm 优化核心：全局共享存储+硬链接（复用文件）+符号链接（组织依赖），无冗余存储与复

制，提升效率；

六、loader和plugin的区别及其在Webpack中的作用

Webpack 本身仅能处理 JavaScript 和 JSON 模块，loader 和 plugin 是其核心扩展机制，二者定位、作用及工作方式差异显著，共同支撑起复杂项目的构建需求。

核心区别

• 定位不同：loader 专注于“模块转换”，解决非 JS/JSON 模块的加载与转译问题；plugin 专注

于“流程扩展”，解决构建过程中的各类优化、资源生成、功能增强等问题。

• 工作时机不同：loader 仅在“编译阶段”（解析模块时）执行，针对单个模块进行处理；plugin

可在 Webpack 构建全生命周期的任意钩子（如初始化、编译、输出等阶段）执行，作用于整个构建流程。

• 使用方式不同：loader 配置在 module.rules 中，通过 test 匹配目标文件，指定对应的

loader 进行处理；plugin 配置在 plugins 数组中，需先引入插件模块，再创建实例（部分插件支持传入配置参数）。

各自在Webpack中的作用

• loader的作用：将非 JS/JSON 模块转换为 Webpack 可识别的模块，以便纳入依赖图谱进行打

包。

常见示例：

babel-loader：将 ES6+ 高级 JavaScript 语法转译为浏览器兼容的 ES5 语法；
css-loader：解析 CSS 文件中的 @import 和 url() 依赖，将 CSS 转换为 JS 模块；
style-loader：将 CSS 模块注入到 HTML 的 <style> 标签中（运行时生效）；
file-loader/url-loader（Webpack 5+ 被 asset 模块替代）：处理图片、字体等静

态资源，实现资源复制或 Base64 转码；

sass-loader：将 Sass/SCSS 语法转译为 CSS 语法。

• plugin的作用：扩展 Webpack 的构建能力，覆盖从初始化配置到输出文件的全流程，实现

HtmlWebpackPlugin：自动生成 HTML 文件，并将打包后的 bundle 自动引入 HTML；
MiniCssExtractPlugin：将 CSS 模块提取为单独的 CSS 文件（替代 style-loader，

适合生产环境）；

CleanWebpackPlugin（Webpack 5+ 可通过 output.clean 替代）：打包前清空输出目

录（dist）；

TerserPlugin：压缩 JavaScript 代码，删除冗余代码和注释；
DefinePlugin：定义全局环境变量（如区分开发/生产环境）；
HotModuleReplacementPlugin：启用热更新功能，实现代码修改后无需刷新页面即可更

新。

七、如何使用Webpack来处理CSS和Sass

Webpack 处理 CSS 和 Sass（SCSS）需借助对应的 loader 完成语法转译和模块解析，生产环境通常还需配合插件提取 CSS 为单独文件，具体配置步骤如下：

处理CSS的核心配置

处理 CSS 需至少用到 css-loader 和 style-loader（开发环境），生产环境推荐使用 MiniCssExtractPlugin 提取 CSS 文件。

• 步骤1：安装依赖：

npm install css-loader style-loader mini-css-extract-plugin --savedev

• 步骤2：Webpack配置：

开发环境（CSS 注入到 style 标签）：

Code block

1module.exports = { 2module: {

3rules: [ 4{

5test: /\.css$/, // 匹配所有 .css 文件 6use: ['style-loader', 'css-loader'], // 执行顺序：从右到左（先执行 css-

loader）

7} 8]

9} 10}

• 生产环境（提取为单独 CSS 文件）：

全站分卷索引 · 26 卷