Webpack

目录

• Webpack 基本概念
• Webpack 常用功能
• Webpack 核心概念
• Webpack 发展历史
• 参考资料

---

Webpack 基本概念

webpack (opens new window) (Web Package) 是一种前端构建工具。

webpack 是一个现代JS应用程序的静态模块打包工具(module bundler)。webpack专注构建模块化项目，分析项目结构，在内部构建依赖图，依赖图包含项目所需的每个模块，根据模块的依赖关系进行静态分析，将浏览器不能直接运行的拓展语言编译转换为合适的格式以供浏览器运行，例如：less/sass -> css，ES6/7/8 -> ES5等，最终打包输出一个或多个静态资源 （bundle）。

Webpack 常用功能

1. 将多个文件合并打包，减少HTTP请求次数，提高效率。
2. 对代码进行编译，确保浏览器兼容性。
3. 对代码进行压缩，减少文件体积，提高加载速度。
4. 检测代码格式，确保代码质量。
5. 提供热更新服务，提高开发效率。
6. 针对不同环境，提供不同的打包策略。

Webpack 核心概念

1. 入口(Entry)：指示 webpack 以哪个文件为入口起点开始打包，分析构建内部依赖图。

2. 输出(Output)：指示 webpack 打包后的资源 bundles 输出到哪里去，以及如何命名。

3. 加载器(Loader)：让 webpack 能够去处理那些非 JavaScript 文件 (webpack 自身只理 解 JavaScript)。

   常用加载器 (opens new window)

4. 插件(Plugins)：让 webpack 能够执行除 Loader 之外更广范围的任务。

   常用插件 (opens new window)

5. 模式(Mode)：指示 webpack 使用相应(环境)模式的配置。

6. 模块(Module)

7. 依赖图(Dependency Graph)

什么是bundle？

bundle：是由webpack打包出来的文件。

什么是chunk？

chunk：代码块，一个chunk由多个模块组合而成，用于代码的合并和分割。

什么是module?

module：是开发中的单个模块，在webpack的世界，一切皆模块，一个模块对应一个文件，webpack会从配置的entry中递归开始找出所有依赖的模块。

Webpack 发展历史

2012年3月10日，webpack诞生。

2014年2月，webpack1。

2016年12月，webpack2。

2017年6月，webpack3。

2018年2月，webpack4。

2020年10月，webpack5。(注意：使用webpack5版本，需要将Node.js版本升级到 10.13+)

参考资料

webpack介绍 (opens new window)

webpack核心概念 (opens new window)

webpack 面试题整理 (opens new window)

webpack看这一篇就够了