webpack - "include"和 "exclude"在 webpack loader 中是如何工作的

标签 webpack

更新&回答:

我的误解是:

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



但是,某些导入/需要的文件不需要进行转换。比如“node_module”中的js文件已经处理完毕。所以不需要再被 Babel loader 改造。这就是为什么我们需要在加载器中“排除:/node_modules/”的原因。

同样,如果您知道加载程序要转换哪些文件,则可以使用“include”。

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

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

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

一种常见的情况是“排除:/node_modules/”。让我困惑的是,如果入口 js 文件需要来自 node_modules 的一些文件,那么我们排除 node_modules。那么最终的捆绑文件将不包含来自 node_modules 的所需文件。在这种情况下,最终的 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']
        }
    }]
  }
}; 

谢谢

德里克

最佳答案

问题是没有那个 exclude (或 include )当您在代码中指向依赖项并处理它们时,webpack 将遍历依赖项。即使这可行,它也会带来严重的性能损失。
我更喜欢设置一个 include我自己(允许名单超过拒绝名单/阻止名单),因为这让我可以更好地控制行为。我include我的应用程序目录,然后将更多项目添加到 include基于需要。这使我可以轻松地进行异常(exception)处理并处理来自 node_modules 的位。如果绝对需要。

关于webpack - "include"和 "exclude"在 webpack loader 中是如何工作的,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37823764/

相关文章:

reactjs - 带有 typescript 的react-leaflet GeoJSON 不渲染geojson 点

javascript - react-hot-loader 在 create-react-app 中的 styled-components css 发生变化后不更新

node.js - 在 webpack.config.js 中获取当前的 `--mode`

javascript - Webpack 在 ES5 中生成箭头函数

angular - Webpack 迁移问题

javascript - 模块构建失败 - Webpack、React、Babel

javascript - HTML <source> 标签上的 Webpack JSX 错误

reactjs - 如何将 React webapp 集成到带有 jar 包装的 Spring Boot 应用程序中

css - 使用 Webpack 的提取文本插件捆绑时,LESS 导入不起作用

javascript - 如何在我的 Webpack 项目中使用 Polyglot.js?