红宝书第三十二讲：零基础学会模块打包器：Webpack、Parcel、Rollup

---

红宝书第三十二讲：零基础学会模块打包器：Webpack、Parcel、Rollup

资料取自《JavaScript高级程序设计（第5版）》。

查看总目录：红宝书学习大纲

---

一、模块打包器是什么？

把分散的HTML/CSS/JS文件 组合成浏览器可加载的单个/少量文件 。解决三大问题 ^[1](#1)：

1. 依赖管理（如import语法）
2. 语法转换（ES6→ES5）
3. 文件优化（压缩、图片转base64）

---

二、Webpack：配置灵活的全能选手 ^[2](#二、Webpack：配置灵活的全能选手 21)^^[1](#二、Webpack：配置灵活的全能选手 21)^

主流打包工具，适合复杂项目（如React/Vue）。

核心特点

1. 插件丰富：支持代码分割、热更新等
2. Loader机制 ：不同类型文件转换（如.scss→.css）

典型配置文件（webpack.config.js）

module.exports = {
  entry: './src/index.js',    // 入口文件
  output: {
    filename: 'bundle.js',    // 输出文件
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      { test: /\.css$/, use: ['style-loader', 'css-loader'] } // CSS处理规则
    ]
  }
};

常用rules

以下是 Webpack 最常用的 rules 配置列表，以表格形式呈现：

规则名称	描述	示例
test	用于匹配文件扩展名的正则表达式，决定哪些文件需要被处理	test: /\.js$/ 匹配所有 .js 文件
include	包含哪些文件或目录	include: [path.resolve(__dirname, 'src')]
exclude	排除哪些文件或目录	exclude: /node_modules/ 排除 node_modules 目录
use	指定使用的 Loader，可以是字符串或对象数组	use: ['style-loader', 'css-loader']
loader	在 use 中指定单个 Loader	loader: 'babel-loader'
options	为 Loader 传递选项	options: { presets: ['@babel/preset-env'] }
enforce	强制执行 Loader 的顺序，可选值为 pre 或 post	enforce: 'pre' 强制在其他 Loader 之前执行

示例配置

以下是一个常见的 Webpack rules 配置示例：

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader']
      },
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192 // 小于 8KB 的图片会被转为 base64
            }
          }
        ]
      },
      {
        test: /\.vue$/,
        use: 'vue-loader'
      }
    ]
  }
};

这些规则涵盖了常见的文件类型处理，如 JavaScript、CSS、图片等，适用于大多数 Webpack 项目。

常用loder配置

以下是 Webpack 中最常用的 Loader 及其 options 配置的表格总结：

Loader 名称	常用 options 配置	描述
url-loader	limit name outputPath esModule	小于 limit 的文件会被转为 Base64 编码，否则使用 file-loader 处理。
file-loader	name outputPath esModule	将文件复制到输出目录，并返回文件的公共 URL。
css-loader	modules importLoaders sourceMap	解析 CSS 文件中的 @import 和 url()，支持 CSS 模块化。
style-loader	insert singleton attributes	将 CSS 插入到 HTML 的 <style> 标签中。
sass-loader	implementation sourceMap	将 Sass 文件编译为普通 CSS 文件。
babel-loader	presets plugins	用于编译 ES6+ 代码到 ES5。
eslint-loader	fix configFile	对 JavaScript 文件进行代码检查，fix 可自动修复部分问题。
postcss-loader	postcssOptions sourceMap	使用 PostCSS 插件处理 CSS，如 autoprefixer。
image-webpack-loader	mozjpeg pngquant gifsicle webp	对图片进行优化，如压缩、格式转换。
html-loader	minimize attributes	处理 HTML 文件，支持压缩和图片引用处理。

这些配置项是 Webpack 项目中常用的 Loader 配置，可以根据项目需求进行调整。

---

三、Parcel：开箱即用 ^[2](#三、Parcel：开箱即用 2)^

零配置工具，适合新手快速上手小项目。

使用步骤

1. 安装工具

npm install -g parcel-bundler

1. 直接运行

parcel index.html  # 自动处理HTML中的JS/CSS引用

优点演示

项目结构：

src/
  index.html
  style.css
  app.js

直接运行后生成优化后的 dist 文件夹，自动处理所有依赖和编译！

---

四、Rollup：轻量高效的库打包器 ^[2](#四、Rollup：轻量高效的库打包器 23)^^[3](#四、Rollup：轻量高效的库打包器 23)^

专为JS库设计，提供 Tree Shaking 移除未使用代码。

示例：打包一个数学库

源码（math.js）：

export function add(a, b) { return a + b; }
export function multiply(a, b) { return a * b; }

主文件（index.js）：

import { add } from './math.js';
console.log(add(2,3));

打包后 ：仅保留 add 函数代码！^[3](#3)

快速安装使用

npm install rollup --save-dev
npx rollup index.js --file bundle.js --format umd

---

五、横向对比：该怎么选？

工具	特点	适用场景
Webpack	✔️配置灵活 ✔️生态强大 ❌上手复杂	企业级复杂项目（React/Vue）
Parcel	✔️无需配置 ✔️自动优化 ❌定制性差	简单页面原型开发
Rollup	✔️极致精简 ✔️打包效率高 ❌插件少	JS库或框架开发（如Vue3）

---

目录：总目录

上篇文章：红宝书第三十一讲：通俗易懂的包管理器指南：npm 与 Yarn
下篇文章：红宝书第三十三讲：新手也能懂的转译工具指南：Babel vs TypeScript

脚注

---

1. 《JavaScript高级程序设计（第5版）》说明Webpack支持多模块格式和插件扩展 ↩︎ ↩︎

2. 《JavaScript高级程序设计（第5版）》介绍Webpack、Parcel和Rollup的基本特性 ↩︎ ↩︎ ↩︎

3. 《JavaScript高级程序设计（第5版）》指出Rollup具备Tree Shaking功能 ↩︎ ↩︎