原文

Webpack 被广泛用于大部分前端项目。 Webpack 有很多内容，本文我不会全部介绍，但我确实想谈谈某些方面。

调试项目时最重要的信息之一，是了解导致您看到的错误的技术。它可以帮助您更有效地使用 google，帮助您缩小可能导致问题的更改范围等。

由于抽象的漏洞，理解问题是 Webpack 还是 Node.js 并不像人们想象的那么明显。 所以让我们来谈谈吧！

Node.js

重要的是要记住 npm 捆绑在 Node.js 中。

Npm 是一个包管理器。 npm 侦听 package.json 文件以确定要安装的依赖项和版本。 运行 npm install 的结果位于您的 node_modules 目录中。

如果你在 package.json 中列出包名时弄错了包名，或者试图引用一个不存在的版本，当你尝试安装依赖项时，npm 会对你大喊大叫。 但是只要这些东西存在，并且 npm 可以安装它们，它就不在乎。

webpack

许多现代工具让 Webpack 配置对于开发人员来说，成为一个黑盒子。但是 Webpack 的目标是捆绑资源以便浏览器可以使用它们。

最终，您的依赖项作为您的代码可以引用的静态资产存在。 以前见过这样的代码吗？

const React = require('react')

好吧，这就是事情变得有点混乱的地方。

OVERLOADING REQUIRE

Node.js 遵循 CommonJS 约定并包含 require 作为内置函数。 require 允许您在其他文件中引用 JavaScript。

Webpack 支持许多不同的规范，包括 CommonJS。 所以 require 也是有效的 Webpack 语法。 但是，Webpack 的 require 比 Node.js 中的相同功能更强大。 它使用增强解析并允许您引用绝对路径、相对路径和模块路径。

Webpack 还包含一个名为 require.resolve 的函数。 此函数采用模块名称并返回一个包含模块路径的字符串。 两者之间的区别有时令人困惑，因此我想在此处包含该标注。

SUPPORTING MULTIPLE STANDARDS

如前所述，Webpack 允许使用多种不同的语法（尽管它建议您在项目中保持一致）。 其中之一是 ES6。 ES6 中 require 的大致等价物是这样的。

import React from 'react'

这就是事情真正变得有趣的地方。 ES6 和 CommonJS 不是同一个规范！ 因此，即使两者都在 Webpack 中有效，但它们通常不在生态系统的其他地方。 并且由于 Webpack 为您捆绑了许多不同类型的文件，因此要保持整洁可能具有挑战性。

Node.js

目前，ES6 导入语法在 Node.js 中无效。 如果你想支持它，你可以使用实验包 esm。

这意味着在服务器端运行的文件，利用 Node.js 运行时，可能需要使用 require。

BABEL

相反，许多 JavaScript 文件在浏览器中运行。这些文件通常是用 Babel 构建的。

当 Babel 编译您的代码时，它会将您所有的导入转换为 Node.js 的 require 语句（而不是 Webpack 的）。

值得注意的是，Babel 输出通常需要由 Webpack 捆绑。