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

红宝书第三十二讲：零基础学会模块打包器：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']
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 的