为什么 webpack 需要一个我不使用的导入加载器？

Question

假设我的 index.js

中有这个

import { foo } from "./extra.js";

然后在我的extra.js中有这个

export function foo () { return 0; }
export function bar () { import("./baz.svg"); }

当我尝试构建时，我收到有关 baz.svg 的错误：“您可能需要适当的加载程序来处理此文件类型”。
显然我从不在我的代码中使用 bar ，那么为什么 webpack 试图捆绑它呢？以及如何避免这种情况？

Answer 1

在“规则”节点下的 webpack.config.json 中添加这些行：

{
test: /\.(png|jpg|gif|svg)$/i,
  use: [
    {
      loader: 'url-loader',
      options: {
        limit: 8192
      }
    }
  ]
},

Answer 2

您要实现的是 tree shaking。要启用 tree shaking，您必须配置一些优化设置，如图所示 here。

然而，即使有这些设置，这个问题也无法解决。那是因为 - 死代码消除或 tree shaking 发生在模块解析发生之后。您可以将其视为生成后运行以优化捆绑包的东西。 Webpack 将尝试找到用于导入 svg 文件的加载器。

您可以尝试的东西很少，但 none 无需任何安装即可满足您的需求：

Why does webpack need a loader for an import which I don't use?