39

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

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

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

  4. 更多问题包括:当文件被转译时,*.js 文件是否被连接成一个大文件?

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

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

4

3 回答 3

21

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

  1. entry - 可以是定义要捆绑的资产的入口点的数组或对象,可以是 js,因为这里的测试说只为 /.js$ 做。如果您的应用程序有多个入口点,则使用数组。
  2. include - 定义加载器将转换导入文件的路径或文件集。
  3. exclude 是不言自明的(不要从这些地方转换文件)。
  4. output - 您要创建的最终捆绑包。例如,如果您指定

    输出:{ 文件名:“[name].bundle.js”,供应商:“react”}

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

希望它有所帮助

于 2016-01-18T18:36:44.613 回答
8

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

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

装载机

一组自动应用的加载器。

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

  • 测试:必须满足的条件
  • exclude:不能满足的条件
  • 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
        }
      ]

    }
于 2017-10-27T16:16:44.063 回答
-2

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
}
于 2016-01-05T23:49:35.617 回答