Deprecated，别学了，直接用 vite
Webpack 对于现代前端开发来说是一个必不可少的工具。无论你是主动配置，还是被动地通过 CLI 调用。如果你想使用 ES6、TypeScript、JSX 等新技术，你的项目中总是会有它。
Webpack 虽然很强大，但是想要用好它并不是一件轻松的事情。它的难点不是说理解原理和机制有多么的复杂，而在于如何编写配置。究其原因，在于文档庞杂，部分文档语焉不详，以及不同的配置项、插件可能会互相影响。
本 Repo 的目的，便是总结一些 Webpack 配置上的实践经验。以便后来人在学习使用 Webpack 的过程中可以少走一些弯路。通过可运行的 Demo，循序渐进地学习使用 Webpack 解决项目打包的具体需求。
所有示例在
demo/文件夹中，包含可运行的配置和代码，以及 readme。
不定期更新版本并重构
- 0 编译 JS 文件
- 1 打包 HTML+JS
- 2 dev-server 即时预览
- 3 打包 HTML+JS+CSS
- 4 用 webpack-chain 重构打包配置
- 5 用 TypeScript 重构打包配置
- 6 Scss、Less、CSS
- 7 Babel 基本, 用 TypeScript 写业务代码
- 8 代码压缩配置
- 9 Dynamic Import
- 10 [Let's]: Polyfill
- 11 [Let's]: Polyfill + async
- 12 [Let's]: Tree Shaking
- 13 目前为止的功能*（一）
- 14 打包静态资源（如图片字体）
- 15 React
- 16 Vue
- 17 目前为止的功能*（二）
- 18 输出文件名、Vendor
- TODO
- Webpack
- 提高编译速度
- Webpack
- TODO
- alias
- 编写 custom plugin
如果你要为团队实现可配置的打包工作。
可能会有这些注意点。
- 打包任务可以从命令行调用，也可以通过 JS 代码参数化调用。
createWebpackConfig(options)- 为实现批量打包，可以设计带参数的配置生成函数，而不直接通过
argv读取命令行参数。
- 为实现批量打包，可以设计带参数的配置生成函数，而不直接通过
simpleBundler(input, output, opts)- 除了为整个项目打包，也可以写一个简单编译函数，诸如老项目中的局部代码库文件，支持编译 JS 和 CSS。
hashBurner(templates, patterns)- 如果在你们的项目中，HTML 页面来源于 Django、Spring 等后端框架管理的非标准 HTML 文件，你可能需要手动处理模板中的资源引用路径（build 之后带了 hash）。（可能 HtmlWebpackPlugin 等插件无法满足需求）
- Log 信息
- 打包所涉及的所有资源路径（用于项目清理分析）
- 打包时间，当前配置（mode、watch 等），输入输出路径等友好的信息。
- 给其他开发人员设计的编译可选项
slient，批量编译的时候你应该不希望 console 疯狂输出太多信息hash，是否给输出文件添加 hashpolyfill，对于 JS 是转义诸如[].flat这样的 API，对于 CSS 是 autoprefixer 功能clean，模糊检测以前的打包文件并清除，比如文件名相同但 hash 不同。（和 CleanWebpackPlugin 区别开，只清除相关文件，并非清空整个目录）
- 运行环境的支持
- 支持运行 TypeScript 编写的脚本：Webpack、Babel、Jest 等
- 项目和脚本的 tsconfig、babel.config 等可以区别开。（毕竟项目可能要兼容 IE，但是跑编译任务应该不用）
- Alias 统一化，从
tsconfig.json中读取paths字段（路径映射配置项），转义成 Webpack、Babel、Jest 等不同工具支持的 alias 字段。拒绝到处复制粘贴。 - 你编写脚本的代码可能也用了高级语法（比如可选链），如果你的部署环境是诸如 Node 10 等老版本，你可能还是需要 babel-node（语法 + Polyfill）
- 有这么多技术需求，要注意管理项目的文件夹结构，可以建一个
scripts/文件夹
关于这些话题，我以后有机会另写文章详细展开。
- webpack-starter：
我很久之前做的，现在有点毛病，重构计划中References 可以看看。 - fe-workflow - 制定你自己的前端工作流
- webpack-chain