子舒的博客
·
webpack 的核心概念和构建流程
💡
原文中文，约4000字，阅读约需10分钟。
📝
内容提要
本文介绍了如何使用 web-webpack-plugin 插件配置单页应用的入口和生成 HTML 文件。通过 AutoWebPlugin 方法，可以简化多个单页应用的配置。同时讨论了服务端渲染的 webpack 配置，以及 loader 和 plugin 的区别与使用场景，并提供了编写自定义 loader 和 plugin 的基本示例。
🎯
关键要点
- 单页应用需要配置 entry 指明执行入口，web-webpack-plugin 的 WebPlugin 可以自动完成这些工作。
- WebPlugin 可以生成包含入口的所有依赖文件的 chunk，并生成 HTML 文件来加载这些 chunk。
- AutoWebPlugin 方法可以简化多个单页应用的配置，避免为每个单页应用单独配置 entry 和 WebPlugin。
- 服务端渲染的 webpack 配置需要采用 commonjs 规范，并且不应包含除 js 之外的文件。
- loader 用于对单独文件进行转换，而 plugin 用于处理更复杂的场景。
- 编写自定义 loader 和 plugin 的基本示例提供了如何实现这些扩展的思路。
❓
延伸问答
如何使用 web-webpack-plugin 配置单页应用的入口？
可以通过配置 entry 指明执行入口，使用 WebPlugin 自动生成包含入口依赖的 chunk 和 HTML 文件。
AutoWebPlugin 方法有什么作用？
AutoWebPlugin 方法可以简化多个单页应用的配置，避免为每个单页应用单独配置 entry 和 WebPlugin。
webpack 中 loader 和 plugin 有什么区别？
loader 用于对单独文件进行转换，而 plugin 用于处理更复杂的场景和功能扩展。
如何编写自定义的 webpack loader？
编写自定义 loader 需要导出一个函数，该函数接收文件内容并返回转换后的内容。
服务端渲染的 webpack 配置需要注意什么？
服务端渲染的配置需要采用 commonjs 规范，并且不应包含除 js 之外的文件。
如何在 webpack 中处理 CSS 文件？
在 webpack 配置中，可以使用 loader 来处理 CSS 文件，例如使用 'ignore-loader' 来忽略非 js 文件。
➡️
