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

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

2. loader:'babel-loader'，就是我们使用npm安装的loader

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

4. 关于以下内容的更多问题:转译文件时，*.js 文件会串联成一个大文件吗？

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

6. query: { presets: ['es2015'] } 做什么？

Answer 1

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

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

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

   输出:{ 文件名:“[名称].bundle.js”， vendor :“ react ”

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

希望对你有帮助