当前位置：首页 > news >正文

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

news 来源：原创 2025/9/21 7:40:18

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

资料取自《JavaScript高级程序设计（第5版）》。
查看总目录：红宝书学习大纲

一、模块打包器是什么？

把分散的HTML/CSS/JS文件 组合成浏览器可加载的单个/少量文件。解决三大问题 ¹：

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

二、Webpack：配置灵活的全能选手 ²¹

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

核心特点

插件丰富：支持代码分割、热更新等
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：开箱即用 ²

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

使用步骤

安装工具

npm install -g parcel-bundler

直接运行

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

优点演示

项目结构：

src/index.htmlstyle.cssapp.js

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

四、Rollup：轻量高效的库打包器 ²³

专为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 函数代码！³

快速安装使用

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

脚注

《JavaScript高级程序设计（第5版）》说明Webpack支持多模块格式和插件扩展 ↩︎ ↩︎
《JavaScript高级程序设计（第5版）》介绍Webpack、Parcel和Rollup的基本特性 ↩︎ ↩︎ ↩︎
《JavaScript高级程序设计（第5版）》指出Rollup具备Tree Shaking功能 ↩︎ ↩︎

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

红宝书第三十二讲：零基础学会模块打包器：Webpack、Parcel、Rollup 资料取自《JavaScript高级程序设计（第5版）》。查看总目录：红宝书学习大纲一、模块打包器是什么？ 把分散的HTML/CSS/JS文件组合成浏览…...

编程日记 2025/9/21 7:40:18

DeepSeek 在金融领域的应用解决方案

DeepSeek 在金融领域的应用解决方案一、背景随着人工智能技术的快速发展，DeepSeek 作为一款国产大模型，凭借其强大的语义理解、逻辑推理和多模态处理能力，在金融行业迅速崭露头角。金融行业作为经济的核心，面临着激烈的市场竞…...

编程日记 2025/9/16 3:52:40

linux 处理2个文件的差集

命令 grep -Fvxf 文件1 文件2 -F 将模式视为固定字符串，而非正则表达式。 -v 反向匹配，输出不匹配的行。 -x 精确匹配整行，避免部分匹配。 -f 文件1 从文件1中读取模式。示例执行命令 grep -Fvxf a1.txt a2.txt...

编程日记 2025/9/3 0:41:31

vue3中pinia基本使用

一、安装以及引入安装：npm install piniamain.js文件： import { createApp } from "vue"; import { createPinia } from "pinia"; import App from "./App.vue";const pinia createPinia() const app createApp(App)…...

编程日记 2025/9/10 6:04:47

“乐企“平台如何重构业财税票全流程生态？

2025年，国家税务总局持续推进的"便民办税春风行动"再次推进数字化服务升级，其中"乐企"平台作为税务信息化的重要载体，持续优化数电票服务能力，为企业提供更高效、更规范的税务管理支持。在这一背景下&#xf…...

编程日记 2025/9/11 18:26:06

JVM内存模型

JVM内存模型 JVM（Java Virtual Machine）内存模型是 Java 程序在运行时，JVM 为其分配的内存结构，它定义了 Java 程序如何在内存中存储数据和如何进行线程之间的通信。JVM 内存模型是为了支持高效的多线程执行和垃圾回收机制。一…...

编程日记 2025/9/18 15:11:07

LeetCode热题100记录-【二分查找】

二分查找 35.搜索插入位置思考：二分查找先判定边界条件记录：不需要二刷 class Solution {public int searchInsert(int[] nums, int target) {int left 0,right nums.length-1;if(nums[right] < target){return right1;}if(nums[left] > tar…...

编程日记 2025/9/8 8:20:43

科普：原始数据是特征向量么?

一、输入向量 x \mathbf{x} x是特征向量机器学习算法公式中的输入向量 x \mathbf{x} x通常要求是特征向量。原因如下： 从算法原理角度：机器学习算法旨在通过对输入数据的学习来建立模型，以实现对未知数据的预测或分类等任务。特征向量是对…...

编程日记 2025/9/18 22:17:24

1.完整代码 chartsOption: {tooltip: {trigger: "item",formatter: this.initTooltip,triggerOn: "mousemove",borderColor: "#fff",backgroundColor: "rgba(216, 227, 244, 1)",extraCssText: "border-radius: 14px;", //…...

编程日记 2025/9/20 13:04:24

Linux(十三）fork + exec进程创建

一、进程创建在了解进程创建的步骤前，让我们先通过实例观察一下。大家可以跟小编一起，在终端中执行3次ps -f命令，观察一下。通过上图，我们可以发现，3次ps -f的父进程（PPID）都是一样的&#xf…...

编程日记 2025/9/12 7:21:51

集合计算高级函数

说明过滤遍历一个集合并从中获取满足指定条件的元素组成一个新的集合转化/映射（map）将集合中的每一个元素映射到某一个函数扁平化扁平化映射注：flatMap 相当于先进行 map 操作，在进行 flatten 操作集合中的每个元素的子元素映…...

编程日记 2025/9/17 14:22:27

鼎讯信通便携式雷达信号干扰模拟器：打造实战化电磁环境的新利器

在现代战争中，电磁环境的复杂性直接影响着雷达装备的性能和作战效果。面对敌方日益精进的电子战手段，如何提升雷达设备的抗干扰能力，确保其在实战环境中的稳定性和可靠性，已成为各国军队和科研机构的重要课题。为此，…...

编程日记 2025/9/10 10:54:06

避开养生误区，拥抱健康生活

在追求健康的道路上，我们常常会陷入一些养生误区，不仅无法达到预期效果，还可能损害身体健康。只有拨云见日，认清这些误区，采取正确的养生方式，才能真正拥抱健康生活。很多人认为，保健品吃得…...

编程日记 2025/9/19 8:43:18

解码ChatBI技术形态：独立对话框、插件式与IM集成模式的技术优劣

ChatBI的形态之争随着大语言模型（LLM）技术的成熟，**对话式商业智能（ChatBI）**正成为企业数据分析的新范式。然而，不同的技术形态直接影响ChatBI的落地效果——独立对话框、插件式助手、IM集成机器人&…...

编程日记 2025/9/19 9:45:59

rockylinux 8 9 升级到指定版本

rockylinux 8 update 指定版本 rockylinux 历史版所有版本rockylinux 最新版所有版本vault历史版 pub最新版(https://dl.rockylinux.org)地址后面增加不同名称 echo "delete repos" rm -rf /etc/yum.repos.d/*echo "new rockylinux repo" cat <<EO…...

编程日记 2025/9/18 11:02:49

一文详解OpenCV环境搭建：Ubuntu20.4使用CLion配置OpenCV开发环境

在计算机视觉和图像处理领域，OpenCV 是一个不可或缺的工具。其为开发者提供了一系列广泛的算法和实用工具，支持多种编程语言，并且可以在多个平台上运行。对于希望在其项目中集成先进视觉功能的开发者来说，掌握如何配置和使用OpenC…...

编程日记 2025/9/16 4:29:28

Android Coli 3 ImageView load two suit Bitmap thumb and formal，Kotlin（四）

Android Coli 3 ImageView load two suit Bitmap thumb and formal，Kotlin（四） 对 Android Coli 3 ImageView load two suit Bitmap thumb and formal，Kotlin（三）-CSDN博客进行完善，注意完善 …...

编程日记 2025/9/20 5:12:05

01-JVM 内存模型与 GC 原理

JVM 内存模型与 GC 原理解析本文将从 JVM 内存模型入手，深入剖析各个区域的作用、GC 的运行机制与常见算法，并结合源码与面试思维，带你掌握 JVM 的底层世界。一、JVM 内存模型（Java Memory Model） JVM 将内存划分为…...

编程日记 2025/9/18 18:19:25

Docker--Docker镜像制作的注意事项

Docker 镜像制作 dockerfiles的指令讲解链接 CMD和ENTRYPOINT CMD 和 ENTRYPOINT 是 Dockerfile 中用于指定容器启动时运行命令的两个指令。它们在功能上有一些相似之处，但也存在重要区别。在编辑Dockerfile时，ENTRYPOINT或者CMD命令会自动覆盖之前…...

编程日记 2025/9/19 17:29:13

AI：支持向量机（SVM）

支持向量机（SVM）理论基础详解：从零开始的完全指南一、SVM的核心思想：直观理解 1.1 什么是分类问题？想象你在玩一个游戏：桌上有红色和蓝色的球，你需要画一条线把它们分开。这条线就是分类边界。SVM的目标是找到一条最优分界线，使得这条线到最近的红色球和蓝色球的距…...

编程日记 2025/9/11 1:16:31

Vue.js 中 v-if 的使用及其原理

在 Vue.js 的开发过程中，条件渲染是一项极为常见的需求。v-if指令作为 Vue.js 实现条件渲染的关键手段，能够根据表达式的真假来决定是否渲染某一块 DOM 元素。它在优化页面展示逻辑、提升用户体验等方面发挥着重要作用。接下来，我们就深入探讨…...

编程日记 2025/9/19 19:02:16

Vue.js 中 v-show 的使用及其原理

在 Vue.js 的开发过程中，我们常常需要根据不同的条件来控制页面元素的显示与隐藏。v-show指令作为 Vue.js 提供的重要工具之一，为我们实现这一功能提供了便捷的途径。它与v-if指令有些相似，但在使用方法和原理上存在着明显的区别。接下来&…...

编程日记 2025/9/4 22:41:25

docker安装redisSearch

1.背景 Redis Search 是 Redis 官方提供的全文搜索引擎,它为Redis 提供全文搜索、索引和复杂查询功能。它基于内存存储，结合了 Redis 的高性能和倒排索引技术，支持实时搜索、聚合分析、模糊匹配等场景。RedisSearch 适用于需要快速检索结构化或非结构化…...

编程日记 2025/9/20 5:12:23

ADI的BF561双核DSP怎么做开发，我来说一说（六）IDE硬盘设计

作者的话 ADI的双核DSP，最早的一颗是Blackfin系列的BF561，这颗DSP我用了很久，比较熟悉，且写过一些给新手的教程。是的你没有看错，就是IDE，那个最老的硬盘，我们当年做过此类设计。硬件准备 …...

编程日记 2025/9/10 1:29:15

5.数据结构-图

5.数据结构-图 5.1 图的定义和基本术语5.1.1 图的定义5.1.2 图的基本术语 5.2图的存储结构5.2.1邻接矩阵采用邻接矩阵表示法创建无向网邻接表 5.1 图的定义和基本术语 5.1.1 图的定义图 G由两个集合V和E组成，记为 G ( V , E ) G(V,E) G(V,E)，其中V是…...

编程日记 2025/9/9 17:52:35

uni-app使用web-view传参的坑

问题描述 uni-app开发的一个页面，需要点击时跳转到PC端后台的一个详情页，所以需要传参如下： ticketIdticketCodetoken（用于自动登录，校验身份的） 但是吧，如果你明文传token，容易导…...

编程日记 2025/9/11 11:16:17

Android studio打包uniapp插件

一.参考资料与环境准备原生工程配置需要使用到Android studio和HbuilderX 当前测试的as版本-20240301,下载地址：HbuilderX版本：4.36 二.插件创建流程 1.导入下载的UniPlugin-Hello-AS工程（下载地址见参考资料） 2.生成jks证书…...

编程日记 2025/9/19 17:19:23

SVT-AV1学习-函数selfguided_restoration_fast_internal

一 selfguided_restoration_fast_internal 函数作用 selfguided_restoration_fast_internal是SVT-AV1 编码器中用于自引导恢复Guided Resration SGR 的一个内部函数，通过自引导滤波技术对输入的去燥他图像数据进行处理，生成一个去燥版本的图像&#xff0…...

编程日记 2025/9/16 6:00:14

双引擎驱动：解密音视频体验的QoS技术底座与QoE感官革命

QoS 定义：QoS（Quality of Service，服务质量）衡量音视频传输技术层面的性能表现，聚焦网络传输和系统处理能力，通过客观指标量化服务质量。核心指标码率/带宽：数据传输速率上限，直接…...

编程日记 2025/9/6 4:48:19

element-plus选择菜单栏不变色

代码： <template> ... <el-menu-item index"/task/execute"><el-icon><IconMenu /></el-icon><span>验收任务</span> </el-menu-item> <el-menu-item index"/task/change"><el-icon…...

编程日记 2025/9/21 4:32:36

uniapp加载json动画

一、添加canvas画布 <canvas id"lottie_demo" type"2d" style"display: inline-block;width: 148rpx; height: 148rpx;" /> 二、引入依赖和JSON文件安装依赖 npm install lottie-miniprogram --save import lottie from lottie-mini…...

编程日记 2025/9/19 5:40:30

快递物流展同期举办2025中国智慧物流核心零部件创新论坛

2025中国智慧物流核心零部件创新论坛会议主题：“AI ”重构智慧物流核心技术生态会议介绍随着人工智能、物联网、5G等技术的快速发展，智慧物流已成为全球物流行业转型升级的核心方向。在AI技术的驱动下，物流行业正从传统的“人、车、货”…...

编程日记 2025/9/12 14:32:03

ASP.NET图书馆借阅系统(源码+lw+部署文档+讲解)，源码可白嫖!

摘要近些年来，随着科技的飞速发展，互联网的普及逐渐延伸到各行各业中，给人们生活带来了十分的便利，图书馆借阅系统利用计算机网络实现信息化管理，使图书信息、图书借阅、归还的管理发展和服务水平有显著提升。本文拟…...

编程日记 2025/9/8 1:08:56

在 Linux 终端中轻松设置 Chromium 的 User-Agent：模拟手机模式与自定义浏览体验

在 Linux 系统中，通过终端灵活控制 Chromium 的行为可以大幅提升工作效率。本文将详细介绍如何通过命令行参数和环境变量自定义 Chromium 的 User-Agent，并结合手机模式模拟，实现更灵活的浏览体验。为什么需要自定义 User-Agent？…...

编程日记 2025/9/15 5:51:27

实验一单管共射极放大电路

这篇文章是即兴写的，也不知道对不对，只有代码哦~~(文章结尾有彩蛋哦~~~） 表1-1实验数据MATLAB代码： clear all; clc % 参数设置 VCC 12; % 电源电压 (V) RB1 45e3; % 偏置电阻 RB1 (Ohms) RB2 15e3; % 偏置电阻 RB2 (Ohms) R…...

编程日记 2025/9/12 6:03:27

10-python面向对象(上)

10-python面向对象【上】 1.面向对象简介2. 类(class)3. 类的定义4. 参数self4.1 属性和方法4.2 self 1.面向对象简介 Python是一门面向对象的编程语言所谓面向对象的语言，简单理解就是语言中的所有操作都是通过对象来进行的面向过程： 面向过程指将我们…...

编程日记 2025/9/11 10:21:49

Java 大视界 -- 基于 Java 的大数据分布式缓存技术在电商高并发场景下的性能优化（181）

💖亲爱的朋友们，热烈欢迎来到青云交的博客！能与诸位在此相逢，我倍感荣幸。在这飞速更迭的时代，我们都渴望一方心灵净土，而我的博客正是这样温暖的所在。这里为你呈上趣味与实用兼具的知识，也…...

编程日记 2025/9/9 7:49:13

Apache Airflow开源程序是一个以编程方式编写、计划和监控工作流程的平台

一、软件介绍文末提供程序和源码下载 Apache Airflow开源程序是一个以编程方式编写、计划和监控工作流程的平台，当工作流被定义为代码时，它们将变得更加可维护、可版本化、可测试和协作性。使用 Airflow 将工作流创作为任务的有向无环图 （D…...

编程日记 2025/9/8 12:07:05

大数据学习（101）-spark的高可用模式

🍋🍋大数据学习🍋🍋 🔥系列专栏： 👑哲学语录: 用力所能及，改变世界。 💖如果觉得博主的文章还不错的话，请点赞👍收藏⭐️留言📝支持一…...

编程日记 2025/9/10 3:45:53

数字内容体验驱动用户参与增效

数字体验驱动参与增长在数字化竞争日益激烈的市场环境中，数字内容体验已成为撬动用户深度参与的核心杠杆。通过个性化推荐算法与跨渠道分发策略的协同作用，企业能够精准匹配用户兴趣点，将碎片化信息转化为连贯的价值链条。数据显示&#xf…...

编程日记 2025/9/9 15:01:43

一文详解OpenGL环境搭建：Ubuntu20.4使用CLion配置OpenGL开发环境

在计算机图形学的广阔领域中，OpenGL作为行业标准的图形库，为开发者提供了强大的工具集来创建从简单的2D图形到复杂的3D世界。然而，对于初学者而言，配置一个合适的开发环境是迈向成功的第一步。本文将详细介绍如何在Ubuntu 20.04.3 LTS操作系统上搭建基于CLion的OpenGL开发环…...

编程日记 2025/9/10 10:35:16

欧拉函数模板

1.欧拉函数模板 - 蓝桥云课问题描述这是一道模板题。首先给出欧拉函数的定义：即 Φ(n) 表示的是小于等于 n 的数中和 n 互质的数的个数。比如说 Φ(6)2，当 n 是质数的时候，显然有 Φ(n)n−1。题目大意： 给定 n 个正整数…...

编程日记 2025/9/3 14:11:16

用PointNet++训练自己的数据集（语义分割模型semseg）

（1）训练部件分割（partseg）模型和检测自己点云并将结果保存txt，请看博主上两篇文章 （2）本文背景是将pipe点云上的缺陷和本体检测出来，即1种语义场景（pipe）&…...

编程日记 2025/9/14 17:35:42

Java反射机制深度解析：方法、实战与底层机制

大家好，我是钢板兽！ 反射作为Java的特性，它不仅是Spring三大特性Ioc、DI、AOP的基础，而且MyBatis、Jackson序列化、rpc远程调用接口都用到了反射机制。本文将带你系统性地掌握 Java 反射的使用，通过 JSON 反序列化的…...

编程日记 2025/9/3 7:29:30

查看wifi密码

netsh wlan show profile nameCMCC-Rkt_Wi-Fi5 keyclear CMCC-Rkt_Wi-Fi5是无线网名称...

编程日记 2025/9/16 3:42:39

RPC 发展史

RPC 发展史 RPC（Remote Procedure Call）即远程过程调用，随着微服务的兴起，每个服务都拥有自己的数据库，负责各自的模块，例如 keystone（认证服务）负责用户信息、权限认证的内容&…...

编程日记 2025/9/15 1:39:57

蓝桥杯基础算法-递归

代码简洁，但涉及到的运算，会随着递归层数的增加成指数级增长路分析：第20行20列位于45度这条线上这条线上的数字是1 5 13 25 41...两数之差:4 8 12 16 --->每一个都是在前面的基础上4，可以用递归或者循环 public class dem…...

编程日记 2025/9/3 3:55:55

山东大学离散数学第七章习题解析

参考教材：离散数学教程，徐秋亮 / 栾俊峰 / 卢雷 / 王慧 / 赵合计编著，山东大学计算机科学与技术学院注：该解析为个人所写，涵盖了 2022-2023-2 学期赵合计老师所布置的所有课本习题；由于学识、认识及经验…...

编程日记 2025/9/9 5:14:56

关于使用python 安装 flask-openapi3扩展，使用docker 环境的完整复盘

在某个时刻需要运行python 3 flask-openapi3扩展当前因为服务器为国产化服务器，操作系统版本为麒麟，python 版本为3.7 因为要安装flask-openapi3 包又因为flask 版本小于2.0 from flask_openapi3 import OpenAPI,Info,Tag目前安装的是 …...

编程日记 2025/9/8 16:55:20

MybatisPlus的一些基本操作

mybatisplus分页 Testvoid testpage(){IPage<User> page new Page<>(1,3); userDao.selectPage(page,null);System.out.println("当前页码值："page.getCurrent());System.out.println("每页显示数："page.getSize());S…...

编程日记 2025/9/4 16:55:04

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

一、模块打包器是什么？

二、Webpack：配置灵活的全能选手 21

核心特点

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

常用rules

示例配置

常用loder配置

三、Parcel：开箱即用 2

使用步骤

优点演示

四、Rollup：轻量高效的库打包器 23

示例：打包一个数学库

快速安装使用

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

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

脚注

相关文章：

二、Webpack：配置灵活的全能选手 ²¹

三、Parcel：开箱即用 ²

四、Rollup：轻量高效的库打包器 ²³

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