javascript - webpack 术语中的 "webpack module"到底是什么？

Question

我是 webpack 的新手，目前正在尝试理解基本概念。
查看官方文档，页面 Concepts它使用模块术语并提供链接以在 Modules 页上阅读有关模块的更多信息.
所以在这个页面上，我们有“什么是模块”的问题，但没有给出明确的答案。相反，它通过它们如何“表达它们的依赖关系”来描述模块:

What is a webpack Module

In contrast to Node.js modules, webpack modules can express theirdependencies in a variety of ways. A few examples are:

• An ES2015 import statement

• A CommonJS require() statement

• An AMD define and require statement

• An @import statement inside of a css/sass/less file.

• An image url in a stylesheet url(...) or HTML file.

所以它没有明确定义模块到底是什么，我现在很困惑。
模块只是一个javascript文件吗？
还是任何类型的文件，例如 .css 或图像？
还是模块是一些与物理文件完全无关的逻辑概念？

Answer 1

您的问题的简单答案是 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 和 list goes on .这是其他模块系统大体上不能或不会做的事情。所以从某种意义上说，Webpack 模块是 Javascript 模块的超集。