Yarn 2 / Webpack require.resolve UseEntry 数组无法引用加载器

Posted 2023-02-16

【中文标题】Yarn 2 / Webpack require.resolve UseEntry 数组无法引用加载器

【英文标题】：Yarn 2 / Webpack require.resolve "use" array of UseEntry fails to reference loader

【发布时间】：2021-03-16 22:17:09

【问题描述】：

我正在尝试升级到 yarn 2，但在“使用”基于数组的加载器和正确解析方面遇到了一些障碍。

这是之前工作 webpack 配置的摘录。

...

  test: /\.(gif|png|jpeg|jpg|svg)$/i,
  include: path.resolve(__dirname, "./static/images"),
  use: [
   "file-loader",
   
     loader: "image-webpack-loader",
     options: 
       mozjpeg:  progressive: true ,
       gifsicle:  interlaced: true ,
       optipng:  enabled: false ,
       pngquant:  enabled: false 
     
   
 ]
,
...

运行 yarn dlx @yarnpkg/doctor 返回以下错误消息。

assets/webpack.common.js:33:14: Webpack configs from non-private packages should avoid referencing loaders without require.resolve

第 33 行第 14 列是“use”键的左括号字符。

当我将加载程序字符串包装在 require.resolve(...) 中时，纱线医生命令会出现相同的错误。

有没有人知道为什么这里会出现问题？根据 webpack 的文档，这应该完全没问题，但我不确定哪个工具在这里遇到了困难。

https://webpack.js.org/configuration/module/#ruleuse

环境： OSX：10.15.7 (19H15) - 卡特琳娜

节点-v：v15.3.0

yarn --version: 2.4.0

webpack: ~5.9.0

【问题讨论】：

我在这里找到了错误代码：yarnpkg.com/getting-started/migration#before-we-start，可能值得一读

我已经在文档中阅读了该错误代码，不幸的是它没有用。做推荐的事情并不能解决问题。当您使用多个解析器时，require.resolve 似乎不起作用。

我相信这只是doctor 中的一个错误......在 Berry Bug Tracker 中记录一个问题应该可以解决这个问题。检查在这里：github.com/yarnpkg/berry/blob/…

【参考方案1】：

这是@yarnpkg/doctor中的一个bug，这个bug位于这个代码块： https://github.com/yarnpkg/berry/blob/6b9df772ac785f73e6d08f0fc8c3f1718f296671/packages/yarnpkg-doctor/sources/cli.ts#L157-L159

if (name === `use` || name === `loader`) 
  checkForUnsafeWebpackLoaderAccess(workspace, property.initializer, configuration, report);

上面的代码块将属性use 和loader 的值视为对加载程序的引用，但它不处理数组，在您的情况下use 是一个数组。

在@yarnpkg/doctor 中解决此问题的第一个天真的方法是将上面的块更改为：

if (name === `use` || name === `loader`) 
  if (property.initializer.kind === ts.SyntaxKind.ArrayLiteralExpression) 
    ts.forEachChild(property.initializer, childNode => 
    if (childNode.kind !== ts.SyntaxKind.ObjectLiteralExpression) 
        checkForUnsafeWebpackLoaderAccess(workspace, childNode, configuration, report);
      
    );
   else 
    checkForUnsafeWebpackLoaderAccess(workspace, property.initializer, configuration, report);
  

上面的代码块处理 loader 和 use 属性的数组的方式是通过访问项目并对每个不是对象文字的项目运行医生检查，对象文字将在 processNode 函数中的递归期间处理.数组的这种特殊分支需要以特殊方式处理非对象字面量数组项 - 作为加载器引用。

这只是实现它的一种方式，另一种可能的方式是记住我们在processFile外部函数局部变量中的loader和use数组内部迭代。