webpack 加载器和包含

Posted 2023-02-22

【中文标题】webpack 加载器和包含

【英文标题】：webpack loaders and include

【发布时间】：2016-04-09 23:01:16

【问题描述】：

我是 webpack 的新手，我正在尝试了解加载器及其属性，例如测试、加载器、包含等。

这是我在 google 中找到的 webpack.config.js 的示例 sn-p。

module: 
    loaders: [
      
        test: /\.js$/,
        loader: 'babel-loader',
        include: [
          path.resolve(__dirname, 'index.js'),
          path.resolve(__dirname, 'config.js'),
          path.resolve(__dirname, 'lib'),
          path.resolve(__dirname, 'app'),
          path.resolve(__dirname, 'src')
        ],
        exclude: [
          path.resolve(__dirname, 'test', 'test.build.js')
        ],
        cacheDirectory: true,
        query: 
          presets: ['es2015']
        
      ,
    ]

测试：/.js$/ 将仅用于扩展名为 .js 的文件，我说得对吗？

加载器：'babel-loader'，是我们使用 npm 安装的加载器

包括：我对此有很多问题。我们放入数组中的任何内容都会被转译，我说得对吗？这意味着，lib、app 和 src 中的 index.js、config.js 和所有 *.js 文件都将被转译。

关于 include 的更多问题：当文件被转译时，*.js 文件是否会连接成一个大文件？

我认为 exclude 是不言自明的。它不会被转译。

query: presets: ['es2015'] 有什么作用？

【问题讨论】：

1.是 2. 是 3. 否：仅当它是 required/imported 时才会被转译，而不是明确 4. 是 5. 是 6. babeljs.io/docs/plugins/preset-es2015

当你说“它只有在需要或导入时才会被转译。你是什么意思？这是否意味着如果 index.js 包含使用导入的代码，文件是index.js 中的引用会被导入吗？

只有在入口点导入这些文件时才会加载这些文件。如果您创建空的 index.js - 只有空的 index.js 会被加载并包含在包中。

index.js 中的代码是 import $ from 'jquery';并从 'react' 导入 React；那么这两个文件会被转译吗？我希望我能理解你最后的回复。谢谢！

"会被转译吗？" --- 只要它们匹配任何include 路径并且不匹配所有exclude 路径。如果jquery 在node_modules 目录中 - 它不会被转译。

【参考方案1】：

在 webpack config 中有很多东西需要配置，重要的是

entry - 可以是数组或对象，定义要捆绑的资产的入口点，可以是 js，因为这里的测试说只为 /.js$ 做。如果您的应用程序有多个入口点，请使用数组。 include - 定义加载程序将在其中转换导入文件的路径或文件集。 exclude 是不言自明的（不要从这些地方转换文件）。

输出 - 您要创建的最终包。如果你指定例如

输出： 文件名：“[名称].bundle.js”， 供应商：“反应”

然后您的应用程序 js 文件将被捆绑为 main.bundle.js 并在 vendor.js 文件中做出反应。如果你不在 html 页面中同时使用两者，则会出现错误。

希望对你有帮助

【讨论】：

我的问题：如果“example.js”文件是由“entry.js”文件导入的。但是这个“example.js”没有包含在loader的“include”中，“example.js”会被包含在最终的“bundle.js”中吗？

@derek 将包含在捆绑包中，但是没有任何转换，因为该导入没有“包含”为加载程序应该关心的导入

【参考方案2】：

这份文档帮助我更好地理解。看起来它适用于 webpack 1，但仍然适用。

https://webpack.github.io/docs/configuration.html#module-loaders

加载器

自动应用的加载器数组。

每个项目都可以具有以下属性：

测试：必须满足的条件 排除：不得满足的条件 include: 加载器将在其中转换导入文件的路径或文件数组 loader: 一串“！”分离式装载机 loaders： 一个字符串形式的加载器数组

这个例子帮助我理解了发生了什么。看起来您使用包含或排除但不是同时使用。测试是应用于所有文件的条件。所以如果你包含一个文件夹，每个文件都必须通过测试条件。我尚未对此进行验证，但根据文档提供的示例，它看起来就是这样工作的。

    module: 

      rules: [
        
          // "test" is commonly used to match the file extension
          test: /\.jsx$/,

          // "include" is commonly used to match the directories
          include: [
            path.resolve(__dirname, "app/src"),
            path.resolve(__dirname, "app/test")
          ],
          // "exclude" should be used to exclude exceptions
          // try to prefer "include" when possible

          // the "loader"
          loader: "babel-loader" // or "babel" because webpack adds the '-loader' automatically
        
      ]

    

【讨论】：

这个包含将有助于将 header.html 包含到 index.html 中？像这样

【参考方案3】：

1) 正确。

2) 正确。

3) 正确。

4) 我不确定。我的 webpack.config.js 文件包含一个输出键，并将其全部捆绑到一个文件中：

output: 
    path: path.resolve(__dirname, 'build'),
    filename: 'bundle.js'

5) 正确。

6) 这告诉 babel-loader 你希望它执行什么样的转译，以及其他编译选项。因此，例如，如果您希望它也转换 jsx + 缓存结果以提高性能，您可以将其更改为：

query: 
    presets: ['react', 'es2015'],
    cacheDirectory: true

【讨论】：

我希望你能像我上面与 zerkms 的对话一样解释#3。谢谢！

（编辑：这是完全错误的） include 中列出的文件是您希望 webpack 开始编译的入口点。这些入口点文件未引用的代码将不会包含在 webpack 的输出中。

"include 中列出的文件是入口点" --- 它们不是。

是的，这不是入口点。有一个属性叫entry