Webpack

基础配置

Webpack 参数可以放在命令行，也可以写入默认的 webpack.config.js，并通过 --config 指定其他配置文件。配置文件使用 CommonJS 导出对象；原笔记指出，命令行与配置文件冲突时以命令行为准。

常见配置包括：

mode：development 或 production。
entry：指定入口文件和 chunk 名称。
output：通过 path、filename 等配置输出；文件名可使用 chunk 名和 Hash。
target：指定 web 或 node 等构建目标。
module.noParse：通过正则指定不解析的模块。
devtool：配置 Source Map，例如 eval、source-map。
resolve.modules：指定模块查找目录。
resolve.extensions：指定默认扩展名。
resolve.alias：配置别名。
externals：排除不需要打包的外部依赖。

Source Map

工程化代码通常会经过合并、压缩和转换，实际运行代码不便直接调试。Source Map 记录转换后代码与源代码之间的映射关系。打包文件末尾通过 sourceMappingURL 指向 .map 文件，浏览器可据此显示源代码中的错误位置。

原笔记建议在开发环境把 Source Map 作为调试手段，生产环境谨慎公开，因为 Map 文件可能体积较大，也可能暴露源代码。

编译过程

Webpack 先合并 CLI 参数、配置文件和默认配置，生成最终配置。随后为入口创建 chunk。Chunk 表示从某个入口找到的所有依赖集合，具有名称和唯一 ID。

构建依赖时，Webpack 读取模块内容、匹配 Loader、生成 AST、记录依赖、替换依赖引用并保存转换后的模块代码。每个 chunk 最终生成资产列表，并根据内容生成 chunk Hash；多个 chunk 资产合并后生成总体构建结果。

Loader

Loader 本质上是函数，接收源码内容并返回转换后的源码。Loader 在 module.rules 中通过 test 匹配文件，通过 use 指定 Loader 和 options。原笔记还记录了查询参数传参，以及通过导出函数的 raw 属性表示是否接收原始数据。

Plugin