Webpack 如何解析 'jquery' & '@angular/xxx' 等入口模块名称

【问题标题】：How does Webpack resolve entry module names such as 'jquery' & '@angular/xxx'Webpack 如何解析 'jquery' & '@angular/xxx' 等入口模块名称
【发布时间】：2017-09-22 19:51:17
【问题描述】：

webpack 入口点 (https://webpack.js.org/concepts/entry-points/) 的文档说入口值应该指向一个文件。

const config = {
  entry: {
    main: './path/to/my/entry/file.js'
  }
};

但是，在我看到的许多示例中（通常围绕创建供应商特定的输出），我注意到给出了一个模块列表。

var config = {
  // ...
  entry: {
      vendors: ['@angular/core','react','jquery']
  }
  // ...
}

Webpack 如何获取字符串“@angular/core”或“jquery”，并将它们解析为磁盘上的 javascript 源文件？我错过了什么？

【问题讨论】：

标签： webpack

【解决方案1】：

默认情况下，webpack 遵循 Node.js 的模块解析。当导入既不是绝对路径（以/ 开头）也不是显式相对路径（以./ 或../ 开头）时，它被解析为一个模块，这意味着它是Loading from node_modules Folders。

例如，如果您导入 jquery，您将使用从 npm 安装的模块，该模块应位于 ./node_modules/jquery。如果在该目录中找不到该模块，它会移动到父目录并检查其node_modules 目录。以此类推，直到找到模块或到达文件系统的根目录。

Webpack 允许您通过配置 resolve.modules 来更改查找模块的位置。如果你配置了这个选项，你应该确保包含"node_modules"，否则你将无法导入从 npm 安装的模块。

【讨论】：