构建 Webpack 知识体系 | 青训营

为什么要学习Webpack？

• 理解前端“工程化”概念、工具、目标
• 一个团队总要有那么几个人熟悉Webpack，某种程度上可以成为个人的核心竞争力
• 高阶前端必经之路

如何学习Webpack

• 入门级：学会灵活应用
• 进阶：学会扩展Webpack
• 大师：源码级理解Webpack打包编译原理

什么是Webpack

前端项目由什么构成？——资源

当然可以手动管理这些资源，但

• 依赖手工，比如有50个JS文件...操作，过程繁琐
• 当代码文件之间有依赖的时候，就得严格按依赖顺序书写
• 开发与生产环境一致，难以接入TS或JS新特性
• 比较难接入Less、Sass等工具
• JS、图片、CSS资源管理模型不一致

这些都是旧时代非常突出的问题，对开发效率影响非常大，直到出现了很多工程化工具，某种程度上正式这些工具的出现，才有了“前端工程”这一概念

Webpack本质上是一种前端资源编译、打包工具

• 多份资源文件打包成一个Bundle

• 支持Babel、Eslint、TS、CoffeScript、Less、Sass

• 支持模块化处理css、图片等资源文件

• 支持HMR+开发服务器

• 支持持续监听、持续构建

• 支持代码分离

• 支持Tree-shaking

• 支持Sourcemap

  ...

Webpack知识体系

Webpack是一个用于构建现代Web应用程序的开源JavaScript工具。它是一个模块打包工具，可以将各种前端资源（如JavaScript、CSS、HTML、图片等）打包成一个或多个静态资源文件，以便用于生产环境。Webpack的知识体系涵盖了许多方面，以下是Webpack的主要知识点：

1. 入口（Entry）：

   • Webpack的构建过程始于一个或多个入口文件。这些文件定义了依赖图的根节点，Webpack会从这些文件开始分析和构建依赖关系。

2. 输出（Output）：

   • 指定Webpack打包后的文件输出位置和文件名。通常，输出文件是一个或多个JavaScript文件，但也可以生成其他类型的文件，如CSS、HTML等。

3. 加载器（Loaders）：

   • Webpack使用加载器来处理非JavaScript文件。加载器可以将不同类型的文件转换为模块，以便它们可以被包含在依赖图中。例如，babel-loader用于将ES6+代码转换为ES5，css-loader用于处理CSS文件。

4. 插件（Plugins）：

   • 插件用于执行各种任务，如代码压缩、文件拷贝、环境变量注入等。Webpack有丰富的插件生态系统，例如HtmlWebpackPlugin用于生成HTML文件，MiniCssExtractPlugin用于提取CSS到单独的文件。

5. 模块（Modules）：

   • Webpack将应用程序拆分为模块，模块可以是JavaScript文件、CSS文件、图片等。模块之间通过依赖关系进行连接。

6. 依赖图（Dependency Graph）：

   • Webpack根据模块之间的依赖关系构建依赖图。这个图表显示了模块之间如何相互依赖，以及它们的加载顺序。

7. 热模块替换（Hot Module Replacement，HMR）：

   • HMR是Webpack的一项功能，允许在运行时替换、添加或删除模块，而无需刷新整个页面。这对于开发过程中的快速反馈非常有用。

8. 代码分离（Code Splitting）：

   • Webpack支持将代码拆分成多个块，以减小初始加载时间并实现按需加载。这可以通过import()语法或配置进行实现。

9. 环境配置（Environment Configuration）：

   • Webpack可以根据开发环境和生产环境的不同进行不同的配置。通常，开发环境需要更多的工具和源映射，而生产环境需要优化和压缩代码。

10. 性能优化：

    • Webpack提供了许多性能优化选项，如代码分割、Tree Shaking、压缩、懒加载等，以确保生成的包大小最小化，加载速度最快。

11. 配置文件：

    • Webpack的配置文件是一个JavaScript文件，用于指定构建过程的各种配置选项。常见的配置文件是webpack.config.js。

12. 模块热替换（HMR）：

    • HMR允许在运行时更新模块，以提供更快的开发体验，而无需重新加载整个应用程序。

13. Webpack Dev Server：

    • Webpack Dev Server是一个用于开发的小型Express服务器，它支持HMR和自动刷新，可以用于本地开发环境。

14. 构建分析工具：

    • 为了优化构建性能，Webpack有许多工具和插件可以分析构建过程并提供可视化报告，例如webpack-bundle-analyzer。

15. 集成其他工具：

    • Webpack通常与其他前端工具，如Babel、ESLint、TypeScript等一起使用，以构建现代Web应用程序。

Webpack的知识体系相当广泛，可以根据项目需求选择学习和应用其中的不同方面。