webpack加载程序和include

webpack loaders and include

本文关键字：include 程序 加载 webpack      更新时间：2023-09-26

我是webpack的新手，我正在努力了解加载程序及其属性，如测试、加载程序、include等。

下面是我在谷歌上找到的webpack.config.js的一个示例片段。

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

  1. test:/.js$/只用于扩展名为.js的文件，我说得对吗？

  2. 加载程序："babel loader"，是我们使用npm 安装的加载程序

  3. 其中包括：我对此有很多问题。我们放入阵列中的任何东西都会被传送，我说得对吗？这意味着，index.js、config.js以及lib、app和src中的所有*.js文件都将被转换。

  4. 更多的问题包括：当文件被传输时，*.js文件会被连接到一个大文件中吗？

  5. 我认为排除是不言自明的。它不会被运输。

  6. 查询：{presets:['es2015']}做什么？

在webpack配置中有多种配置，最重要的是

  • entry-可以是一个数组或一个对象，定义您想要捆绑的资产的入口点，可以是js，正如这里的测试所说，只为/.js$执行。如果您的应用程序有多个入口点，请使用数组。

  • include-定义一组路径或文件，加载程序将在其中转换导入的文件。

  • exclude-不要从这些地方转换文件。

  • output-您想要创建的最后一个捆绑包。例如，如果指定

    output: {
  filename: "[name].bundle.js",
  vendor: "react"
}

    然后，您的应用程序js文件将被绑定为main.bundle.js，并在vendor.js文件中进行反应。如果您在html页面中不同时使用这两种方法，这将是一个错误。

希望它能帮助

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

https://webpack.github.io/docs/configuration.html#module-装载机

装载机

一组自动应用的加载器。

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

  • 测试：必须满足的条件
  • 排除：必须不满足的条件
  • include:加载程序将在其中转换导入文件的路径或文件数组
  • loader:一串"！"分隔的loader
  • loader:作为字符串的loader数组

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

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

1）正确。

2） 正确。

3） 正确。

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

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

5） 正确。

6） 这个命令告诉babel-loader您希望它执行哪种类型的transfile，以及其他编译选项。因此，例如，如果您希望它也能传输jsx+缓存结果以提高性能，您可以将其更改为：

query: {
    presets: ['react', 'es2015'],
    cacheDirectory: true
}
相关文章：