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

Question

因此，我正在检查由create-react-app生成的webpack配置文件，当我发现指定要使用的加载程序时，它使用require.resolve()：

在我总是这样直接放置加载器名称之前：

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

Answer 1

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

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

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

root / webpack.config.js：

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

在上面的示例中，awesome-typescript-loader仅针对project1安装。因此，让我们从根项目中运行webpack。

root / 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')