Javascript webpack如何在node_模块内选择相对路径？它是否引用package.json？

当我执行npm安装react slick时，我会在我的node_modules文件夹中获得以下内容：

现在，在src/index.js文件中的react应用程序中，当我执行以下操作时：

import Slider from "react-slick";

webpack如何知道从何处拾取滑块？它会在node_modules/react slick/package.json中寻找一些线索或定义吗

---

编辑：-这是webpack的文件，当我从“react slick”导入Slider时，它解析为dist还是lib？那么它会选择哪个文件，为什么选择？

好吧，简单的演练如下：

简单演练 如果仔细查看节点_modules/react slick/package.json，就会发现一个名为main的属性。大概是这样的：

{ 名称：react slick， 主要：index.js } 它会告诉Web包哪个文件是整个包的入口文件，它通常引用index.js。包的所有必要导出都位于此文件中，因此Webpack将只查找这些导出，并将导入您要查找的内容。在这种特殊情况下，您现在使用的滑块应该有一个默认导出。因此index.js可能是这样的：

//index.js var slider=require./lib/slider'；//通常所有主要模块都位于lib文件夹下。 //其他进口。。。 module.exports=滑块； 自由党和民主党的区别

---

通常，dist文件夹用于发送用户在不使用包管理时可以使用的UMD。lib文件夹是package.json、main属性指向的，使用npm安装包的用户将直接使用它。与src相反，lib的唯一用途是使用babel和Webpack转换源代码，使之更为通用，因为大多数构建过程不会在节点模块中的包上运行babel转换。

好的，简单的演练如下：

简单演练 如果仔细查看节点_modules/react slick/package.json，就会发现一个名为main的属性。大概是这样的：

{ 名称：react slick， 主要：index.js } 它会告诉Web包哪个文件是整个包的入口文件，它通常引用index.js。包的所有必要导出都位于此文件中，因此Webpack将只查找这些导出，并将导入您要查找的内容。在这种特殊情况下，您现在使用的滑块应该有一个默认导出。因此index.js可能是这样的：

//index.js var slider=require./lib/slider'；//通常所有主要模块都位于lib文件夹下。 //其他进口。。。 module.exports=滑块； 自由党和民主党的区别 通常，dist文件夹用于发送用户在不使用包管理时可以使用的UMD。lib文件夹是package.json、main属性指向的，使用npm安装包的用户将直接使用它。与src相反，lib的唯一用途是使用babel和Webpack将源代码转换为更通用的兼容性，因为大多数构建过程不会在node_模块中的包上运行babel转换。

Webpack使用缩写将node_模块作为目标

例1： 例2： 一旦它以节点_模块中的正确文件夹为目标，它将遵循包本身清单package.json中编写的规则

您还可以定义自己的别名，例如：

webpack.config.js

然后可以用作从$xyz导入xyz，Webpack使用速记将其用于目标节点_模块

例1： 例2： 一旦它以节点_模块中的正确文件夹为目标，它将遵循包本身清单package.json中编写的规则

您还可以定义自己的别名，例如：

webpack.config.js

---

然后可以用作从$xyz导入xyz

@AlexanderSolonik。实际上，您指的是主分支，它的工作方式与最新的软件包版本不同，您应该查看标签下可用的软件包的名称。然后你可以看到一切都和我说的一样。问题编辑部分的答案在SMAKSS的答案中，package.json定义了一个main:./lib。这是它到达文件夹后的目标位置。@Antonioredeljac很抱歉有点刺痛，但是./lib是一个目录而不是一个文件名，所以一旦webpack进入./lib，它如何选择index.js作为查找滑块的文件？如果没有index.js，会不会像节点的计算方式一样，例如查找index.js文件，如果不查找其他文件等？@SMAKSS您链接的文件实际上将main设置为index.jsx，我认为这是此包中未使用的扩展名，如果我npm安装react slick，转到node_modules/react slick/package.json，主节点仍然是./lib。。希望这些信息是相关的：@AlexanderSolonik谢谢。关于Webpack如何在任何直接格式中查找index.js

---

ory，我必须说，与此同时，我无法理解它到底是如何在引擎盖下工作的，但由于它的默认设置，如果你为它提供一个目录，它首先会在其中查找索引文件，如果它找到了，它将返回默认文件和其他导出文件，否则它将抛出一个错误。@AlexanderSolonik，实际上，您指的是主分支，它的工作方式与最新的包版本不同，您应该查看标记下可用的包的名称。然后你可以看到一切都和我说的一样。问题编辑部分的答案在SMAKSS的答案中，package.json定义了一个main:./lib。这是它到达文件夹后的目标位置。@Antonioredeljac很抱歉有点刺痛，但是./lib是一个目录而不是一个文件名，所以一旦webpack进入./lib，它如何选择index.js作为查找滑块的文件？如果没有index.js，会不会像节点的计算方式一样，例如查找index.js文件，如果不查找其他文件等？@SMAKSS您链接的文件实际上将main设置为index.jsx，我认为这是此包中未使用的扩展名，如果我npm安装react slick，转到node_modules/react slick/package.json，主节点仍然是./lib。。希望这些信息是相关的：@AlexanderSolonik谢谢。关于Webpack如何在任何目录中查找index.js，我必须说，与此同时，我无法理解它到底是如何在引擎盖下工作的，但由于其默认设置，如果您为它提供一个目录，它首先会在其中查找索引文件，如果它找到它，它会返回默认文件和其他导出文件，否则它将抛出一个错误。

import 'xyz'
/abc/node_modules/xyz/index.js

import 'xyz/file.js'
/abc/node_modules/xyz/file.js

const path = require('path');
module.exports = {
  //...
  resolve: {
    alias: {
      xyz$: path.resolve(__dirname, 'path/to/file.js')
    }
  }
};