webpack 加载器和包含

Question

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

这是我在 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']
        }
      },
    ]
}

我说得对吗 test: /.js$/ 将仅用于扩展名为 .js 的文件？
加载器：'babel-loader'，就是我们使用npm安装的加载器
包括：我对此有很多疑问。我说的对吗，我们放在数组中的任何东西都会被转译？也就是说，index.js、config.js以及lib、app和src中的所有*.js文件都会被转译。
关于以下内容的更多问题：转译文件时，*.js 文件会串联成一个大文件吗？
我认为排除是不言自明的。它不会被转译。
query: { presets: ['es2015'] } 做什么？

Answer 1

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
}

Answer 2

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

entry - 可以是定义要捆绑的资产的入口点的数组或对象，可以是 js，正如这里的测试所说，只对 /.js$ 执行此操作。如果您的应用程序有多个入口点，请使用数组。
include - 定义导入文件将由加载程序转换的路径或文件集。
排除是不言自明的（不要从这些地方转换文件）。
output - 您要创建的最终包。例如，如果您指定

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

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

希望对您有所帮助

Answer 3

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

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

Loaders

An array of automatically applied loaders.

Each item can have these properties:

test: A condition that must be met

exclude: A condition that must not be met

include: An array of paths or files where the imported files will be transformed by the loader

loader: A string of “!” separated loaders

loaders: An array of loaders as string

这个例子帮助我理解了发生了什么。看起来您使用 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
        }
      ]

    }

webpack 加载器和包含

webpack loaders and include

javascript

ecmascript-6

webpack

webpack-style-loader