webpack加载器和包括-Java 学习之路

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

我是否正确测试：/. js$/将仅用于扩展名为.js的文件？
加载器：'babel-loader'，是我们使用npm安装的加载器
包括：我对此有很多疑问 . 我是对的，我们放在阵列中的任何东西都会被编译好吗？这意味着，将编译lib，app和src中的index.js，config.js和所有* .js文件 .
关于include的更多问题：当文件被转换时，* .js文件会被连接成一个大文件吗？
我认为排除是自我解释的 . 它不会被转化 .
查询：{presets：['es2015']}怎么办？

3 回答

-2
在webpack配置中，有很多配置，重要的是配置
- entry - 可以是一个数组或一个对象，用于定义要捆绑的资产的入口点，可以是js，因为此处的测试只针对/.js$执行 . 您的应用程序（如果有多个入口点）使用数组 .
- include - 定义加载器将转换导入文件的路径或文件集 .
- exclude是自解释的（不要从这些地方转换文件） .
- output - 要创建的最终包 . 如果你指定例如
输出：{filename：“[name] .bundle.js”，供应商：“react”}

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

希望它有所帮助
回复于 2024-04-30T11:03:10+08:00
18
这份文件帮助我更好地理解 . 看起来它适用于webpack 1但仍然适用 .

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

Loaders一组自动应用的加载器 . 每个项目都可以具有以下属性：test：必须满足的条件排除：不能满足的条件包括：路径或文件的数组，其中导入的文件将由加载程序加载器转换：字符串“！”分离的加载器加载器：一组加载器作为字符串

这个例子帮助我理解了发生了什么 . 看起来你使用包含或排除，但不是两者 . 测试是应用于所有文件的条件 . 因此，如果包含文件夹，则每个文件都必须通过测试条件 . 我没有验证这一点，但根据文档提供的示例，它看起来就是它的工作原理 .
```
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
        }
      ]

    }
```
回复于 2024-04-30T11:03:10+08:00
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
}
```
回复于 2024-04-30T11:03:10+08:00

webpack加载器和包括

3 回答

相关问题