Question

我是webpack的新手，我试图理解加载器及其属性，例如test，loader，include等。

以下是我在google中找到的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']
        }
      },
    ]
}

我是否正确测试：/. js$/将仅用于扩展名为.js的文件？
加载程序：＆＃39; babel-loader＆＃39;，是我们使用npm安装的加载程序
包括：我对此有很多疑问。我是对的，我们放在阵列中的任何东西都会被编译好吗？这意味着，lib，app和src中的index.js，config.js和所有* .js文件都将被编译。
有关include的更多问题：当文件被转换后，* .js文件是否会连接成一个大文件？
我认为排除是自我解释的。它不会被转化。
查询：{presets：[＆＃39; es2015＆＃39;]}做什么？

Answer 1

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

条目 - 可以是一个数组或一个对象，用于定义要捆绑的资产的入口点，可以是js，因为此处的测试仅适用于/.js$。您的应用程序（如果有多个入口点）使用数组。
include - 定义加载器将导入文件的路径或文件集。
exclude是自解释的（不要从这些地方转换文件）。
输出 - 您要创建的最终捆绑包。如果你指定例如

输出：{ filename：“[name] .bundle.js”，供应商：“反应” }

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

希望有所帮助

Answer 2

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

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

<强>装载机

一组自动应用的加载器。

每个项目都可以包含以下属性：


测试：必须满足的条件

排除：不得满足的条件

include：加载程序转换导入文件的路径或文件数组

loader：一串“！”分隔的加载器

加载器：作为字符串
的加载器数组

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

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

    }

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

webpack加载器和包括

3 个答案: