webpack 加载器和包含

Question

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

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

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

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

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

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

6. query: { presets: ['es2015'] } 有什么作用？

Answer 1

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

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

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

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

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

希望对你有帮助

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

    }

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
}