本文主要是 survivor js webpack 的学习笔记。因为在面试时会经常遇到相关的问题，期望对其做一定的整理，以方便面试前复习。

• 本文切割时尽量按照原文的章节切割。
• 本文有些观点来自于 survivor js webpack, 也有的观点来自于作者自身。如有不当之处，欢迎留言。

1 什么是 webpack

• 浏览器会消费大量的 HTML, JS, CSS 以及各种图片，流媒体文件。Webpack 可以帮助管理这些文件。
• Webpack 是前端工程化的重要一环，将开发态于生成环境区分。可以更好的分置，调试项目。降低 C I / CD 的成本。
• Webpack 和 Gulp 或者 Grunt 的区别在于，Gulp / Grunt 需要开发者自己写构建流程。Webpack 只写配置文件就能做到对应的打包。
• create-react-app, rockpack, 和 @angular/cli 都是基于 webpack 的，学习 webpack 也有利于对这些构建工具的了解。
• 相较于更新的 Snowpack, Parcel, rollup 来说
  • webpack 对 ESM 支持的有所欠缺。并且 webpack 实际使用的 module 机制是其内部自有的，并不是 CommonJS 或者 ESM.
  • 另一方面来讲，webpack 更加成熟，可用性更强。

2. Webpack 如何改变前端项目复杂的局面

webpack 将一个项目看作是一个依赖树，所有的资源都可以通过标准的 import, require 进行加载。可以通过强大的配置，讲项目中所有的资源按需打包。
虽然学习这样的配置较有难度，不过一旦使用了 webpack 以后，它在项目中就会变得不可或缺。

3 整个文章的结构

• 开发 使用 webpack 启动项目，会覆盖浏览器自动刷新的机制，以及使配置可维护的方法。
• 样式 聚焦样式相关的话题。学习使用 webpack 加载样式及样式自动前缀相关的设置。
• 加载 详细解释 webpack 加载器(loader) 定义，以及如何加载例如图片，字体和 Javascript 的资源。
• 构建 详细介绍源代码映射 (source maps)，打包及代码分拆。学习如何简洁的配置。
• 优化 使构建产物达到产品级，学习如何将构建产物更小，通过 webpack 调优性能。
• 输出 学习多页面设置，SSR 以及 Module Federation.
• 技术 讨论更多的技术点，包括动态加载，Web Works, 国际化，部署应用以及在 Webpack 中消费 npm 包。