15、Webpack 入门与进阶指南

Webpack 入门与进阶指南

1. 基本概念

Webpack 是一个强大的模块打包工具，大多数情况下，我们会得到一个单一的打包文件。默认情况下，Webpack 会将 src/index.js 作为入口文件，生成 dist/main.js 作为输出文件。不过，这些都可以根据需求进行修改。

2. 加载器（Loaders）

Webpack 开箱即用的情况下，仅能处理 JavaScript 和 JSON 文件。若要处理其他类型的文件，就需要使用加载器。加载器的作用是将特定类型的文件转换为有效的模块，使其能够添加到依赖图中，并最终被打包到应用程序中。

加载器有两个关键属性：
- test 属性：用于判断哪些文件需要被转换。
- use 属性：指定要使用的加载器。

以下是一个使用 url-loader 处理图片文件的示例：

module : {
  rules : [
    { test : /\.(jpg|png)$/, use : { loader : "url-loader" } }
  ]
}

当 Webpack 遇到 src 目录下扩展名为 .jpg 或 .png 的文件时，会使用 url-loader 对其进行编码，并将其