4

我是 webpack 的新手，目前正在尝试理解基本概念。查看官方文档，在概念页面上，它使用模块术语并提供链接以阅读有关模块页面上的模块的更多信息。

所以在这个页面上，我们有“什么是模块”的问题，但没有给出明确的答案。相反，它通过它们如何“表达它们的依赖关系”来描述模块：

什么是 webpack 模块

与 Node.js 模块相比，webpack 模块可以通过多种方式表达它们的依赖关系。几个例子是：

  • 一个 ES2015 导入语句

  • CommonJS require() 语句

  • AMD 定义和要求语句

  • css/sass/less 文件中的 @import 语句。

  • 样式表 url(...) 或 HTML 文件中的图像 url。

所以它没有明确定义模块到底是什么，我现在很困惑。

模块只是一个javascript文件吗？还是任何类型的文件，例如 .css 或图像？还是模块是一些与物理文件完全无关的逻辑概念？

4

1 回答 1

4

您的问题的简单答案是 Webpack 模块是由 Webpack 处理的 Javascript 文件。

至于为什么会这样，请考虑以下 Javascript：

if (window.matchMedia('(max-width: 600px)')) {
  const img = document.querySelector('#header-responsive-image');
  img.src = 'different/image/url/file.jpg';
  img.classList.add('some-class');
}

请注意，此代码依赖于特定的标记、图像文件和 CSS 规则。但至关重要的是，您必须 阅读代码 才能了解它们是什么。没有（简单的）方法可以静态分析依赖关系（甚至手动进行！）。

这在小型应用程序中似乎没什么大不了，但是当您使用大型 Javascript 代码库或编写组件库时，静态分析真实依赖关系图并让您的工具在您的 JS、CSS 时立即警告您的能力，标记和磁盘上的文件不同步是救命稻草。

使用文件顶部的 Webpack，您将看到更像这样的内容：

import header600Width from '../img/header-600-width.jpg';
import '../styles/has-some-class.css';
// etc.

您可以加载图像、csv、xml、toml、json、css，不胜枚举。这是其他模块系统大体上不能或不会做的事情。因此，从某种意义上说，Webpack 模块是 Javascript 模块的超集。

于 2021-06-22T16:13:29.687 回答