这不是魔术，这是 Webpack。

捆绑器

那么，什么是 Webpack？

构建依赖关系图

概括

保持水分充足

捆绑器

或许这篇文章更好的标题应该是“这不是魔法，而是 Webpack（或者 Browserify、Brunch、Parcel 等等）。”这些被称为模块打包器，它们被定义为“将小段代码编译成更大、更复杂、可以在 Web 浏览器中运行的代码包”。本质上，它会将所有样式表打包到一个包中，将 TypeScript 打包到另一个包中，将所有 JavaScript 文件打包到另一个包中，等等。

模块打包器本质上会找出哪些代码片段依赖于其他代码片段（换句话说，打包器识别依赖关系），并确保代码按其所需的顺序运行。打包器最终会创建一个依赖关系图，从根（没有依赖项）开始，代码包在图中的位置越靠下，其依赖关系就越多。靠下的代码会等待其依赖项先加载，然后再自行加载。

那么，什么是 Webpack？

即使在简单的应用程序中，我们也会在多个单独的文件中编写大量代码。我们使用 JavaScript@import和 ES6 等语法。我们使用 TypeScript 等辅助工具，它们使我们能够编写更清晰的代码并更快地捕获错误。想象一下使用基于组件的库和React等框架构建的应用程序，在这些应用程序中，我们会导入依赖于应用程序中其他地方编写的代码的组件或函数。我们的代码以浏览器能够理解的方式被解析、打包和执行，这看起来简直就像魔术一样。但事实并非如此。这是一个名为 Webpack 的打包工具。

然而，Webpack 的突出之处在于它能够收集所有依赖项，不仅包括代码，还包括图像、样式表等资产（包括sass、typescript等预处理器），并创建前面提到的依赖关系图。这就是关键——Webpack 的核心是构建依赖关系图。

构建依赖关系图

依赖关系图由几个关键组件组成。这里我将重点介绍：入口、输出、加载器和插件。您可以运行yarn add webpack webpack-dev-server --save-dev并在应用的根目录中创建一个webpack.config.js文件来开始使用。别忘了更新您的package.json脚本：

"start": "webpack-dev-server",
"build": "webpack"

1. 建立入口点

Webpack 做的第一件事就是建立一个入口点。这将是依赖关系图的根。我们可以通过创建一个包含指向源文件对象的变量来实现这一点。通常情况下，这个对象是index.js。你可以用一个简单的字符串来创建这个对象，但为了可扩展性以及可能需要多个入口点，我们还是使用对象吧。

够简单了。

2. 建立输出

Webpack 完成代码打包并创建依赖关系树后，需要告知其最终成品的存放位置；这就是我们的输出。记住，您可以随意命名 filename 参数。通常，其名称类似于main.js。

有趣的是，这是应用程序打包代码所需的基本信息。有了这些信息，你就可以启动本地服务器yarn start，Webpack 就会开始执行它的工作了。

3. Loaders：超越 JavaScript 的打包文件类型

这就是 Webpack 开始变得如此酷的地方。

index.js这是我最近的 React 项目Squad文件中导入的一些内容的屏幕截图。

这是我们每天要做的事情，大概有 100 次。但幕后到底发生了什么？我们告诉 Webpackindex.js需要哪些依赖项。例如，这行代码import ./index.css告诉 Webpack 抓取这些样式。

在我们的webpack.config.js文件中，我们添加一个模块对象，如下例所示（参见webpack 概念、加载器）。

此对象使用正则表达式来识别某些文件类型，然后告诉 Webpack 在打包前使用哪个加载器。我们的意思是：“Webpack 编译器在找到以.cssimport 结尾的路径时，会在打包时使用css-loader和进行转换/加载style-loader。”

重要提示： “转换”是指解析文件（非.js文件），并将其转换为 Webpack 和浏览器可以理解的其他内容。

举几个例子：

• 你曾在 CSS 文件中使用过@import类似 或 的语法吗？Webpack 的css-loader就是原因！它会解析并处理你的文件。这就是你以后可以这样做的原因！正如Webpack 文档中所述，“加载器会识别出这是一个本地文件，并将路径替换为输出目录中图像的最终路径。html-loader 也会以相同的方式处理。” 是不是很酷？url('./icon.png').cssimport Icon from ./icon.png;element.appendChild(Icon)./icon.png<img src="./icon.png" />
• TypeScript是 JavaScript 的超集，它（以及其他一些特性）允许 JS 开发者编写更多静态类型代码，以便在编写代码时捕获错误。但 Webpack 不支持 TypeScript。ts -loader会解析 TypeScript 文件并将其转换为 Webpack 可以读取的 JavaScript 代码。
• 那么任何ES6 语法let（例如类、const变量、箭头函数、默认值、解构等）怎么样？ babel-loader会解析您编写的代码，识别 ES6 语法，然后将其加载并转换为浏览器可以理解的 ES5。

您可以在此处了解有关加载器内部工作原理的更多信息，甚至了解如何编写自己的加载器。

4. 插件 vs. 加载器

装载机

• 在文件级别上工作
• 帮助创建捆绑包（在捆绑包生成期间或之前）

插件

• 在系统层面上工作
• 影响已创建的bundle（bundle或chunk级别）
• 专注于优化（uglifyJS将bundle.js其最小化以减小文件大小）

代码实现看起来像这样：

下图也有助于直观地了解差异：

概括

Webpack 是许多神奇秘诀的幕后推手，它使我们能够使用语法和库来使代码更简洁、更清晰、更具可扩展性。从导入到 ES6，如果没有 Webpack 这样的打包工具，开发应用程序将会非常困难。

保持水分充足

你知道什么好……一款闪亮的全新机械键盘。如果你对一款好键盘感兴趣，请点击那个。或者点击这个，看看其他更酷的选择。

或者也许你有一个好的，并且你想将它稍微修饰一下（你知道我就是这么做的）。