"包含"和"排除"如何在webpack加载器中工作

Question

更新:答案:

我的误解是:

所有导入/必需的文件都将由loader转换.

但是,某些导入/必需的文件不需要转换.例如,已经处理了"node_module"中的js文件.因此,Babel装载机无需再次进行转换.这基本上就是我们在loader中需要"exclude:/ node_modules /"的原因.

同样,如果您知道要由加载器转换的文件,则可以使用"include".

简而言之,entry.js将包含所有导入/必需的文件.但在这些文件中,只有少数文件需要转换.这就是"装载机"引入"包括"和"排除"的原因.

---

我还不太清楚为什么我们需要在webpack的加载器中使用"include"或"exclude".

因为条目js文件总是需要递归地包含其导入/必需的js文件.所有导入/必需的文件都将由loader转换.如果是这种情况,为什么我们需要在装载机中"包含"或"排除"？

一个常见的情况是"exclude:/ node_modules /".令我困惑的是,如果条目js文件需要来自node_modules的一些文件,那么我们将排除node_modules.然后,最终的bundle文件将不包含node_modules中的requied文件.在这种情况下,最终的bundle.js将无法正常工作.我在这里错过了什么吗？

module.exports = {
  entry: [
    './index.js'
  ],
  output: {
    path: path.join(__dirname,"public"),
    filename: 'bundle.js'
  },
  module: {
    loaders: [{
      test: /\.js$/,
      loader: 'babel',
      exclude: /node_modules/,
      query: {
          presets: ['es2015']
        }
    }]
  }
}; 

谢谢

德里克

Answer 1

问题在于,当您在代码中指向它们并处理它们时,没有那个exclude(或include)webpack会遍历依赖项.即使这可行,但它会带来严重的性能损失.

我更喜欢建立一个include自己(黑名单上的白名单),因为这让我可以更好地控制行为.我include我的应用程序目录,然后添加更多的项目到include根据需要.这使我可以轻松地制作异常并node_modules在绝对需要时处理位.

Answer 2

到目前为止,答案还没有真正回答你的核心问题.您想知道捆绑的应用程序如何仍然能够运行,即使其依赖项已被"排除".

实际上,那些'include'和'exclude'属性告诉加载器是否包含/排除所描述的文件(例如内容node_modules),而不是webpack本身.

因此,您导入的"排除"模块node_modules 将被捆绑 - 但它们不会被 babel 转换.这通常是理想的行为:大多数库已经被编译到ES 5.1(甚至是ES 3),因此浪费CPU周期用babel(例如)解析它们充其量是没有意义的.在最坏的情况下,就像像jQuery这样的大型单文件库,它会抛出错误并使你的构建停止崩溃.所以我们排除node_modules.

Answer 3

如果 webpack 捆绑（或外部化）所有依赖项，为什么还需要自定义 webpack include/设置？exclude

这似乎是OP的主要问题。我的答案的要点与之前的答案类似：因为捆绑器的性能。所需/导入的所有内容都将被捆绑或外部化。exclude不会改变这一点，只是根据module.rules. 您通常不想转换所有捆绑的依赖项（例如node_modules），因为这些依赖项通常已经是您的应用程序“非常容易理解”的格式，因此不需要额外的转换过程。简而言之：如果可能的话尽量避免转型，或者：“exclude好，include坏”。

然而，虽然这种类型的性能优化旨在减少捆绑时间，但它并不是一个完美的解决方案。在有关运行时性能优化的讨论中（当我再次找到它们时将链接），您会发现如果加载器有助于提高全局（跨模块）运行时性能，则转换（即包含）所有内容可能是有利的优化。

它可能对已经转换的库有利的另一个例子include：想象一下某个库被转换为替换async functions为对可怕的依赖regeneratorRuntime，这除了在运行时减慢速度之外还因造成很多痛苦而臭名昭著。在这种情况下，如果您不想要这种依赖关系，您可能（经过一些努力）能够让 webpack 使用include并转换其原始源文件，以使用您自己的 webpack 配置重新编译并保留async functions，同时仍然是excluding大多数其他node_modules。

webpack 加载器中的“包含”和“排除”如何工作？

问题标题的措辞可能会导致一些人（比如我自己）从 Google 来到这里，以便更好地理解如何自定义他们的 webpack.configinclude和exclude选项，因为相关的官方文档有些分散。简而言之：

1. excludeand include(and testand resource)记录在此处。
2. 它们是Conditions，记录在此处。
   • 正如您从该文档中看到的，Conditions(ie include/ exclude) 可以是函数，甚至可以是函数数组，也可以是函数、正则表达式、字符串等的混合。
   • 我发现这function一点特别有趣。您不仅可以使用它来更好地自定义您的条件，还可以调试 webpack 解析问题。它允许您记录并清楚地理解所有included/文件，因为它们是由的解析算法excluded拾取的。webpack您可以使用如下函数：

     {
       test: /\.js$/,
       // ...
       include(resourcePath, issuer) {
         console.log(`  included: ${path.relative(context, resourcePath)} (from ${issuer})`);
         return true; // include all
       }
     }
     

3. 这些函数的两个参数（resourcePath和issuer）记录在此处。
   • 在这里，他们还提到 是resourcePath已解析的路径（不是相对路径或名称）。

includePS：虽然/函数的使用在技术上（某种）有记录，但显然不是很明显，从这个 github 问题评论exclude上的许多投票可以看出。