webpack 术语中的“webpack 模块”到底是什么？答案

【问题标题】：What exactly is a "webpack module" in webpack's terminology?webpack 术语中的“webpack 模块”到底是什么？
【发布时间】：2021-06-22 15:55:38
【问题描述】：

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

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

什么是 webpack 模块

与 Node.js 模块相比，webpack 模块可以表达它们的各种方式的依赖。举几个例子：

ES2015 导入声明

CommonJS 的 require() 语句

AMD 定义和要求语句

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

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

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

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

【问题讨论】：

标签： javascript node.js webpack survivejs

【解决方案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 模块的超集。

【讨论】：

你可能想添加一个关于模块加载器的词，这可能会更好地概述 webpack 可以处理什么：webpack.js.org/loaders
那么在您的代码示例中，.css 和 .jpg 文件也是“webpack 模块”吗？
@mlst 不，它们是由模块导入的，Webpack 为你管理底层资源，但它们本身不是模块。
好的，最后一个问题：当模块导入 CSS、JPG 文件时，它们会被转换为某种 JS 代码或数据结构（例如，css-loader 将 CSS 文件转换为 JS Array 和 jpg转换为表示图像数据的 base64 字符串）。现在我们可以根据需要操作这些（虽然它不是很实用），但它们肯定是某种 JS ......所以我们可以将它们视为 webpack 模块吗？所以我说的不是 CSS 或 JPG 作为物理文件，而是它们的 JS 表示形式（例如上面的 header600Width），一旦它们被导入和转换 - 现在被认为是 webpack 模块吗？
@mlst 我不会。这取决于资产，但通常它们没有有意义的 JS 表示，这是抽象的一部分。对于图像，例如 webpack 只是为您创建一个 URL（作为 JS 字符串）。这很重要的原因是 a) 它使您不必自己管理服务器文件系统上路径的字符串表示形式：webpack 将创建一个可以为您设置为 img 的 src 的适当的路径和 b) 所有依赖关系图我在答案中谈到的东西。对于 CSS，你不必担心链接标签和 stylesheet.insertRule，webpack 会处理它。