解决 Webpack 5.9.0 弃用调用 [DEP_WEBPACK_DEPRECATION_ARRAY_TO_SET] 和 [DEP_WEBPACK_CHUNK_MODULES_ITERABLE]

Question

我有几个 webpack 5.9 构建警告，这给我解决带来了一些困难。

我已经尽我所能在网上进行了研究，但无济于事。我确实找到了这个：

Webpack 5 发布文档：数组到集合

然而，除了我理解这些概念之外，我不知道如何更改我的配置设置来解决这个问题。对于如何将内容切换为“使用新的 ChunkGraph API”也是如此。

如有任何帮助，我们将不胜感激。

yarn run build

（节点：90180）[DEP_WEBPACK_DEPRECATION_ARRAY_TO_SET] DeprecationWarning：chunk.files已从Array更改为Set（不推荐使用数组方法“includes”）（用于node --trace-deprecation ...显示创建警告的位置）（节点：90180）[DEP_WEBPACK_CHUNK_MODULES_ITERABLE] DeprecationWarning：Chunk .modulesIterable：使用新的 ChunkGraph API

更新：

我通过使用发现：

node --trace-deprecation node_modules/webpack/bin/webpack.js --mode=development

这两个弃用警告仅在使用 purge-css-webpack-plugin 时发生。我像这样使用它（我从以下内容中了解到：https ://survivejs.com/webpack/styling/elimination-unused-css/ ）：

      new PurgeCSSWebpackPlugin({
        // paths: ALL_FILES,
        paths: purgePath,
        extractors: [
            {
              extractor: (content) =>
                content.match(/[^<>"'`\s]*[^<>"'`\s:]/g) || [],
              extensions: ["html"],
            },
        ],          
    }),

仍然不确定如何解决这些警告，但至少更接近了。另外，考虑其他选项来删除未使用的 CSS......

最新更新

对于@Ashish 和我读过这篇文章的其他人：我确实解决了这个问题。然而，我必须为我在做 b/c 时没有更新这个主题而道歉，现在我不记得我是怎么做的了。我相信我将 package.json 中的一些软件包更新为最新版本。另外，我目前使用 purge css webpack 插件，如下所示：

`new PurgeCSSWebpackPlugin({
    paths: globAll.sync(
      [
        `${path.resolve(__dirname, './src')}/**/*`,
        `${path.resolve(__dirname, './public')}/**/*`
      ],  
      { nodir: true }
   ),
 }),`

Answer 1

这可能与CSS无关，但我遇到了同样的问题，因为我使用的是旧版本的ts-loader，所以我安装了最新的。

npm i -D ts-loader@latest