工程

Webpack初步接触

Webpack 是一个静态模块打包工具，用于将多个模块、文件和资源进行打包，以便在浏览器中高效加载和运行。

Webpack 初步接触

一、什么是 Webpack？

Webpack 是一个 静态模块打包工具，用于将多个模块、文件和资源进行打包，以便在浏览器中高效加载和运行。

核心功能：

模块打包
整合 JS、CSS、图片等资源，提升代码可维护性和复用性。
依赖管理
自动解析模块依赖关系，确保正确加载顺序，降低手动管理复杂度。
代码转换与优化
通过 Loaders 转换代码（如 ES6 → ES5），并优化输出体积。
开发支持
支持 HMR（热更新）、Source Maps 调试、代码分割等，提升开发效率。
生态系统
丰富的插件（Plugins）和加载器（Loaders）扩展功能。

二、Webpack 构建流程

构建过程是串行的，主要分为以下阶段：

初始化参数
合并配置文件与命令行参数，生成最终配置。
启动编译
初始化 Compiler 对象，加载插件并调用 run 方法。
确定入口
根据 entry 配置定位所有入口文件。
编译模块
递归处理模块依赖：
- 调用 Loaders 转换文件内容（如编译 Sass → CSS）
- 解析模块依赖关系，直至所有模块处理完成。
输出资源
将模块组合为 Chunk，生成最终文件（如 JS/CSS 文件）。
写入文件系统
根据 output 配置输出文件到指定路径。

插件机制

Webpack 在构建生命周期广播事件（如 compile、emit），插件通过监听事件调用 API 修改输出结果。

三、常见 Loaders

Loader	功能描述
`raw-loader`	导入文件原始内容（如文本文件）。
`file-loader`	将文件输出到指定目录，返回 URL 路径。
`url-loader`	小于阈值的文件转为 Base64，否则调用 `file-loader`。
`babel-loader`	转换 ES6+ 代码为向后兼容的 JavaScript。
`ts-loader`	编译 TypeScript 为 JavaScript。
`sass-loader`	编译 Sass/SCSS 为 CSS。
`css-loader`	解析 CSS 文件中的 `@import` 和 `url()`。
`style-loader`	将 CSS 注入到 DOM 的 `<style>` 标签中。
`eslint-loader`	静态检查 JavaScript 代码规范。
`vue-loader`	处理 Vue 单文件组件（`.vue`）。

四、常见 Plugins

Plugin	功能描述
`DefinePlugin`	定义全局常量（如环境变量）。
`HtmlWebpackPlugin`	自动生成 HTML 文件并注入资源。
`MiniCssExtractPlugin`	将 CSS 提取为独立文件。
`UglifyJsPlugin`	压缩 JavaScript 代码。
`CleanWebpackPlugin`	构建前清理输出目录。
`WebpackBundleAnalyzer`	可视化分析打包体积。
`SpeedMeasurePlugin`	统计各 Loader/Plugin 的构建耗时。

五、Loader 与 Plugin 的区别

特性	Loader	Plugin
核心功能	转换特定类型文件（如编译 Sass）。	扩展 Webpack 功能（如代码压缩、资源注入）。
使用场景	处理单个文件的转换逻辑。	监听构建事件，执行全局操作。
配置方式	在 `module.rules` 中定义，按文件类型匹配。	在 `plugins` 数组中实例化，可传入参数。
实现原理	基于函数链式调用处理文件内容。	基于 Tapable 事件流，在生命周期钩子中干预构建。