webpack - 在 Webpack 配置规则中使用 require.resolve 的目的是什么？

Question

所以我正在检查由 create-react-app 生成的 webpack 配置文件，当我注意到在指定要使用的加载器时，它使用require.resolve()：

之前我总是像这样直接输入加载器名称：

根据文档require.resolve()获取 id 并将其编译到模块的路径。但是，我仍然不确定这两种方法之间到底有什么区别，因为它们都有效。是不是因为 CRP 将配置文件包装在一个文件夹中，所以需要解析模块的路径？还是有其他原因？

Answer 1

自 v1.0.0 起，此方法在 CRP 中使用。以 PR为例。我认为在您使用子项目构建项目之前，您不应该关心它。

当您有一个复杂的项目时，它确实有意义。如果您使用字符串名称指定加载程序，它将被解析为与根项目相关。但是当您使用require.resolve它指定它时，它将与配置相关，而不是根应用程序。

root
├─┬ project1
│ ├─┬ node_modules
│ │ ╰── awesome-typescript-loader
│ ╰── webpack.config.js
├─┬ project2
│ ├── node_modules
│ ╰── webpack.config.js
├── node_modules
╰── webpack.config.js

根/webpack.config.js：

module.exports = [
  require('./project1/webpack.config.js'),
  require('./project2/webpack.config.js'),
];

在上面的示例中，awesome-typescript-loader 仅为 project1 安装。所以让我们webpack从根项目运行。

根/project1/webpack.config.js：

// It throws "Can't resolve 'awesome-typescript-loader'" error
loader: 'awesome-typescript-loader',

// It works
loader: require.resolve('awesome-typescript-loader')