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

Question

我是 webpack 的新手，目前正在尝试了解基本概念。查看官方文档，在页面 Concepts it uses module term and gives link to read more about modules on page Modules.

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

What is a webpack Module

In contrast to Node.js modules, webpack modules can express their dependencies 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 模块是一个 Javascript 由 Webpack 处理的文件。

至于为什么会这样，好吧，请考虑以下内容 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 模块的超集。

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

What exactly is a "webpack module" in webpack's terminology?

javascript

node.js

webpack

survivejs