什么是“webpack 模块"?在 webpack 的术语中? [英] What exactly is a "webpack module" in webpack's terminology?

问题描述

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

I am a newbie to webpack and currently trying to understand basic concepts. Looking at the official docs, on the page Concepts it uses module term and gives link to read more about modules on page Modules.

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

So on this page we have question "What is a module" but no explicit answer to that is given. Rather, it describes modules by how they "express their dependencies":

什么是 webpack 模块

What is a webpack Module

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

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

• 一条 ES2015 导入语句

• An ES2015 import statement

CommonJS require() 语句

A CommonJS require() statement

AMD 定义和要求声明

An AMD define and require statement

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

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

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

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

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

So it doesn't explicitly defines what exactly is the module and I am confused now.

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

Is module just a javascript file? Or is it any type of file like .css or images? Or is module some logical concept not related to physical files at all?

推荐答案

对您的问题的简单回答是，Webpack 模块是由 Webpack 处理的 Javascript 文件.

The simple answer to your question is that a Webpack Module is a Javascript file that is processed by Webpack.

至于为什么会这样，好吧，请考虑以下 Javascript:

As for why that's a thing, well, consider the following 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 规则.但至关重要的是你必须阅读代码 以找出它们是什么.没有(简单的)方法来静态分析依赖项(甚至手动分析！).

Note that this code has dependencies on specific markup, image files, and CSS rules. But crucially you have to read the code to find out what they are. There's no (easy) way to statically analyze the dependencies (or even do it by hand!).

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

This may not seem like a big deal in small apps, but when you're working with a large Javascript codebase or authoring a component library, the ability to statically analyze the real dependency graph and have your tools warn you immediately when your JS, CSS, markup, and files on disk get out of sync is a lifesaver.

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

With Webpack at the top of the file you're going to see something more like this:

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

您可以加载图像、csv、xml、toml、json、css，列表还在继续.这是其他模块系统基本上不能或不会做的事情.因此，Webpack 模块在某种意义上是 Javascript 模块的超集.

You can load images, csv, xml, toml, json, css, and the list goes on. This is something that other modules systems by-and-large can't or won't do. So a Webpack module is, in a sense, a superset of a Javascript module.

这篇关于什么是“webpack 模块"?在 webpack 的术语中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！