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

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


一、模块打包器是什么?

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

  1. 依赖管理(如import语法)
  2. 语法转换(ES6→ES5)
  3. 文件优化(压缩、图片转base64)
flowchart LR
    网页组件模块 --> JS文件 --> 打包器处理 --> 单个优化文件
    CSS/HTML文件 --> 打包器处理 --> 单个优化文件

二、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']
loaderuse 中指定单个 Loaderloader: 'babel-loader'
options为 Loader 传递选项options: { presets: ['@babel/preset-env'] }
enforce强制执行 Loader 的顺序,可选值为 prepostenforce: '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-loaderlimit
name
outputPath
esModule
小于 limit 的文件会被转为 Base64 编码,否则使用 file-loader 处理。
file-loadername
outputPath
esModule
将文件复制到输出目录,并返回文件的公共 URL。
css-loadermodules
importLoaders
sourceMap
解析 CSS 文件中的 @importurl(),支持 CSS 模块化。
style-loaderinsert
singleton
attributes
将 CSS 插入到 HTML 的 <style> 标签中。
sass-loaderimplementation
sourceMap
将 Sass 文件编译为普通 CSS 文件。
babel-loaderpresets
plugins
用于编译 ES6+ 代码到 ES5。
eslint-loaderfix
configFile
对 JavaScript 文件进行代码检查,fix 可自动修复部分问题。
postcss-loaderpostcssOptions
sourceMap
使用 PostCSS 插件处理 CSS,如 autoprefixer
image-webpack-loadermozjpeg
pngquant
gifsicle
webp
对图片进行优化,如压缩、格式转换。
html-loaderminimize
attributes
处理 HTML 文件,支持压缩和图片引用处理。

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


三、Parcel:开箱即用 2

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

使用步骤
  1. 安装工具
npm install -g parcel-bundler
  1. 直接运行
parcel index.html  # 自动处理HTML中的JS/CSS引用
优点演示

项目结构:

src/
  index.html
  style.css
  app.js

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


四、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

快速安装使用
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功能

kovli
13 声望6 粉丝