在webpack的术语中，“webpack模块”究竟是什么？ Webpack术语中的“webpack模块”是指什么？

Question

在webpack的术语中，“webpack模块”究竟是什么？ Webpack术语中的“webpack模块”是指什么？

4

我是一名Webpack的新手，目前正试图理解基本概念。看着官方文档，在"概念"页面上使用了“模块(module)”这个术语，并给出了有关模块的更多信息的链接，该链接位于"模块"页面。

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

什么是Webpack模块

与Node.js模块不同，Webpack模块可以以多种方式表达其依赖关系。以下是一些示例:

ES2015的import语句

CommonJS的require()语句

AMD的define和require语句

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

样式表url(...)或HTML文件中的图片URL。

因此，它并没有明确定义模块是什么，我现在很困惑。

模块只是一个JavaScript文件吗？还是像.css或图像这样的任何类型的文件？还是模块是一些与物理文件无关的逻辑概念？

- mlst

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jared Smith · Accepted Answer

简单地回答你的问题，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模块的超集。