前言

简介

webpack 是基于 Node.js 开发出来的一个前端项目静态资源打包工具。

它会以一个或多个文件作为打包的入口，将我们整个项目所有文件编译组合成一个或多个文件输出出去。

输出的文件就是编译好的文件，就可以在浏览器端运行了。

为什么要使用 Webpack

• 一句话概括：实现项目工程的自动化
• 分析：
  • 本地版本（方便维护）：
    • html，js，css 分离
    • 模块化
    • es6
    • sass
  • 线上版本（Webpack 打包）：
    • 高性能
    • 体积小
    • 速度快

几个基本概念

Module（模块）

你写的源代码文件（如 .js、.css、.html 等）都是模块。每个文件都是一个独立的模块，Webpack 会根据文件的依赖关系（例如 import 或 require）将它们连接起来。

Chunk（块）

Webpack 会根据项目的依赖关系和配置（比如代码分割），将多个模块分成一个或多个 chunk。一个 chunk 是 Webpack 为了优化加载而生成的代码块，可以包含多个模块。例如，Webpack 会将共享依赖提取到一个 chunk 中，或者将懒加载的代码分成单独的 chunk。

Bundle（包）

最终，Webpack 会将 chunk 生成文件，称为 bundle。这些文件是浏览器能够加载并执行的最终文件。例如，bundle.js 就是一个包含了 Webpack 打包后代码的文件，通常是一个压缩过的 JavaScript 文件。

通俗解释

• 模块（Module）：我们写的源代码文件。
• 块（Chunk）：Webpack 根据文件依赖生成的逻辑块，可能包含多个模块。
• 包（Bundle）：Webpack 将 chunk 文件打包成浏览器能直接执行的文件，通常是 .js、.css 等格式。

总结