标签: 构建工具

CommonJS (CJS) 因动态导出、动态require及对象引用特性，难以支持Tree-shaking，而ESM静态结构天然支持。工具如Webpack有优化，但效果有限。建议优先ESM，提供`module`/`main`双版本，标记`sideEffects: false`优化体积。（128字符）

Vite启动时会预构建依赖，但按需引入某些包（如element-plus样式文件）可能触发Vite强制优化依赖并导致页面刷新。解决方案是在`vite.config.js`中配置`optimizeDeps.include`，手动包含这些依赖，避免Vite自动侦测错误，减少不必要的刷新。 另一种方案是尝试`optimizeDeps.holdUntilCrawlEnd`配置。

Webpack 5仍是主流构建工具，支持模块化、生态成熟、可扩展。优化包括：`output.clean`替代插件清理资源、TS类型声明优化、xxHash64算法提升哈希速度、魔法注释增强模块加载。还讨论了Loader/Plugin开发、浏览器环境处理、资源模块化、未来趋势(Rspack/Turbopack)、争议解决及企业级实践案例。

本文深入解析Webpack Loader开发，涵盖基础架构、高级功能（emitFile, callback）、Pitching Loader及工业级实践。强调测试、性能优化(缓存、并行、AST)、WASM加速及风险控制。案例包括国际化和CSS模块化。Loader正向智能编译中间件演进。

`make`是自动化构建工具，通过`Makefile`定义目标、依赖和命令。支持变量、模式规则和增量构建，提高效率。可并行构建并支持条件判断。常用于CI/CD流程，如GitHub Actions。`make`能简化项目构建与管理，提升开发效率。

`code-inspector-plugin` 是一款提升开发效率的工具，支持多种构建工具。它能通过点击页面DOM，自动打开IDE并定位到相应的源代码位置。

本文介绍了 webpack 中自定义 loader 的方法。loader 本质是导出函数的 JavaScript 模块，用于转换资源文件。文章讲解了`this.emitFile`、`this.callback` 的使用，以及Pitching Loader 的概念，并说明如何在 loaders 之间共享 Data，最后提到了 loader 的测试方法。

Webpack 默认不支持 Vite 的 `module?url` 语法，该语法用于获取模块的 URL。文章提出了两种解决方案：一是使用 `file-loader` 或 `asset/resource`；二是编写自定义 Webpack loader 处理特定请求，返回模块 URL。并提供了一个自定义 loader 的示例代码。