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

Question

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

之前我都是直接把loader的名字这样写的：

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

Answer 1

CRP 从 v1.0.0 开始使用这种方法。例如，参见 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')

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

What's the purpose of using require.resolve in Webpack config rules?

webpack

webpack-4