/webpack-playground

Primary LanguageTypeScript

Deprecated，别学了，直接用 vite

Webpack 从零开始

Webpack 对于现代前端开发来说是一个必不可少的工具。无论你是主动配置，还是被动地通过 CLI 调用。如果你想使用 ES6、TypeScript、JSX 等新技术，你的项目中总是会有它。

Webpack 虽然很强大，但是想要用好它并不是一件轻松的事情。它的难点不是说理解原理和机制有多么的复杂，而在于如何编写配置。究其原因，在于文档庞杂，部分文档语焉不详，以及不同的配置项、插件可能会互相影响。

本 Repo 的目的，便是总结一些 Webpack 配置上的实践经验。以便后来人在学习使用 Webpack 的过程中可以少走一些弯路。通过可运行的 Demo，循序渐进地学习使用 Webpack 解决项目打包的具体需求。

所有示例在 demo/ 文件夹中，包含可运行的配置和代码，以及 readme。
不定期更新版本并重构

  • TODO
    • 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，是否给输出文件添加 hash
    • polyfill，对于 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/ 文件夹

关于这些话题，我以后有机会另写文章详细展开。

参考资料