如何“包括"和“排除"在 webpack 加载器中工作 [英] How "include" and "exclude" works in webpack loader

问题描述

我的误解是:

所有导入/需要的文件都会被加载器转换.

All the imported/required files will be transformed by loader.

但是，一些导入/需要的文件不需要转换.比如node_module"中的js文件已经处理完毕.所以不需要再被 Babel loader 改造.这就是为什么我们需要在加载器中使用exclude:/node_modules/".

However, some imported/required files are not necessary to be transformed. For example, js files in "node_module" have been processed. So there is no need to be transformed again by Babel loader. That is basically why we need "exclude: /node_modules/" in loader.

同样，如果您知道加载程序要转换哪些文件，则可以使用include".

Similarly, if you know what files to be transformed by a loader, you can use "include".

简单地说，entry.js 将包含所有导入/需要的文件.但在这些文件中，只有少数需要转换.这就是loader"引入include"和exclude"的原因.

Simply put, entry.js will include all the imported/required files. But among these files, only a few of them need to be transformed. That is why "loader" introduces "include" and "exclude".

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

I am still not quite clear about the reasons why we need use "include" or "exclude" in loader of webpack.

因为入口js文件总是需要递归地包含其导入/需要的js文件.所有导入/需要的文件都将由加载程序转换.如果是这样，为什么我们需要在加载器中包含"或排除"?

Because the entry js file will always need to include its imported/required js files recursively. All the imported/required files will be transformed by loader. If that is the case, why do we need "include" or "exclude" in loader?

一种常见的情况是排除:/node_modules/".让我困惑的是，如果入口 js 文件需要来自 node_modules 的一些文件，那么我们排除 node_modules.那么最终的捆绑文件将不包含来自 node_modules 的所需文件.在这种情况下，最终的 bundle.js 将无法正常工作.我在这里遗漏了什么吗?

One common case is "exclude: /node_modules/". The thing that confuses me is that if the entry js file need some files from the node_modules and then we exclude the node_modules. Then the final bundle file will not contain the requied file from node_modules. In that case, the final bundle.js will not work correctly. Am I missing anything here?

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']
        }
    }]
  }
}; 

谢谢

德里克

推荐答案

问题是如果没有 exclude(或一个 include)webpack 将遍历依赖项，当您将它们指向您的代码并处理它们.即使这样可行，也会带来严重的性能损失.

The problem is that without that exclude (or an include) webpack would traverse through the dependencies when you point to them at your code and process them. Even though that could work, it would come with a heavy performance penalty.

我更喜欢自己设置一个 include(允许名单而不是拒绝名单/阻止名单)，因为这让我可以更好地控制行为.我 include 我的应用程序目录，然后根据需要向 include 添加更多项目.这使我可以轻松地进行异常处理，并在绝对需要时处理 node_modules 中的位.

I prefer to set up an include myself (allowlist over denylist/blocklist) as that gives me more control over the behavior. I include my application directory and then add more items to the include based on the need. This allows me to make exceptions easily and process bits from node_modules if absolutely needed.

这篇关于如何“包括"和“排除"在 webpack 加载器中工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！