15、Webpack 入门与配置全解析

Webpack 入门与配置全解析

1. Webpack 基础概念

1.1 输出文件

通常情况下，Webpack 会生成一个单一的打包文件。在默认设置里，Webpack 会将 src/index.js 作为入口文件，生成的打包文件存放在 dist/main.js 。不过，这些设置都可以进行调整，以满足特定的输出需求。

1.2 加载器（Loaders）

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

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

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

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

当 Webpack 遇到 src 目录下扩展名为 .jpg 或 .png 的文件时，会使用 url-loader