为什么 webpack 需要一个加载器来进行我不使用的导入？答案

【问题标题】：Why does webpack need a loader for an import which I don't use?为什么 webpack 需要一个加载器来进行我不使用的导入？
【发布时间】：2021-04-28 10:08:38
【问题描述】：

假设我的index.js 中有这个

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

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

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

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

【问题讨论】：

【解决方案1】：

您想要实现的是摇树。要启用树抖动，您必须配置一些优化设置，如 here 所示。

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

您可以尝试的东西很少，但没有任何东西可以在没有任何安装的情况下真正满足您的需求：

【讨论】：

好的，我想我现在明白了。所以不管我是否使用了一段代码，webpack 需要能够在 tree-shaking 和优化之前评估所有内容吗？谢谢。
@eudoxyz 你是对的。 Webpack 需要在运行优化之前创建完整的依赖图。您可以尝试 Rollup.js，如果它的效果不同，因为它在这样做时更具侵略性。但我不完全确定。
如果我尝试了魔法 cmets，我将如何进行？
@eudoxyz 类似：import(/* webpackExclude: /\.svg$/) */ "./baz.svg");

【解决方案2】：

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

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

【讨论】：

谢谢。我已经知道如何添加适当的加载器，但我想知道如果我从不使用或包含某些需要它的代码部分，为什么我首先需要它。我有点认为 webpack 应该对这些东西“聪明”。