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. 我是对的测试:/. js$/将仅用于扩展名为.js的文件？

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

3. 包括:我对此有很多疑问.我是对的,我们放在阵列中的任何东西都会被编译好吗？这意味着,将编译lib,app和src中的index.js,config.js和所有*.js文件.

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

5. 我认为排除是自我解释的.它不会被转化.

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

Answer 1

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

1. entry - 可以是一个数组或一个对象,用于定义要捆绑的资产的入口点,可以是js,因为此处的测试仅适用于/.js$.您的应用程序(如果有多个入口点)使用数组.
2. include - 定义加载器转换导入文件的路径或文件集.
3. exclude是自解释的(不要从这些地方转换文件).

4. output - 要创建的最终包.如果你指定例如

   输出:{filename:"[name] .bundle.js",供应商:"react"}

   然后你的应用程序js文件将捆绑为main.bundle.js并在vendor.js文件中作出反应.如果你不在html页面中同时使用它们是一个错误.

希望它有所帮助

Answer 2

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

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

装载机

一系列自动应用的加载程序。

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

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

    }