webpack 加载器和包含

Question

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

这是我在谷歌中找到的 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. query: { presets: [‘es2015’] } 做什么？

原文由 devwannabe 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

在 webpack config 中有多个配置项，重要的是

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

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

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

希望对您有所帮助

原文由 sandeep 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

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

装载机

一组自动应用的加载器。

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

• 测试： 必须满足的条件
• 排除： 不得满足的条件
• include: 一组路径或文件，加载器将在其中转换导入的文件
• 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
        }
      ]

    }

原文由 zechdc 发布，翻译遵循 CC BY-SA 3.0 许可协议