webpack加载器和包括 [英] webpack loaders and include

问题描述

我是webpack的新手，我正在努力了解装载机及其属性，如测试，加载程序，包含等。

I'm new to webpack and I'm trying to understand loaders as well as its properties such as test, loader, include etc.

这是一个示例

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的文件？

1. Am I right that test: /.js$/ will be used only for files with extension .js?

加载程序：'babel-loader'，是使用npm安装的加载程序

The loader: 'babel-loader', is the loader we install using npm

包含：我有很多问题。我放在阵列中的任何东西都会被弄脏吗？这意味着，lib，app和src中的index.js，config.js和所有* .js文件将被转载。

The include: I have many questions on this. Am I right that anything we put inside the array will be transpiled? That means, index.js, config.js, and all *.js files in lib, app and src will be transpiled.

有关包含的更多问题：当文件被转载时，将* .js文件连接成一个大文件？

More questions on the include: When files get transpiled, do the *.js files get concatenated into one big file?

我认为排除是不言自明的。

I think exclude is self explanatory. It will not get transpiled.

查询：{presets：['es2015']}做什么？

What does query: { presets: ['es2015'] } do?

推荐答案

在webpack config中有多种配置需要配置，重要的是

In webpack config there are multiple things for configuration, important ones are

1. 条目 - 可以是定义要捆绑的资产的入口点的数组或对象，可以是js，因为这里只是为/.js$做测试。您的应用程序如果有多个入口点使用数组。


2. include - 定义导入的文件将由加载程序转换的路径或文件集。


3. exclude是自解释的（不要将文件从这些位置转换）。



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

1. entry - can be an array or an object defining the entry point for the asset you want to bundle, can be a js as test here says do it only for /.js$. Your application if has multiple entry points use an array.
2. include - defines the set of path or files where the imported files will be transformed by the loader.
3. exclude is self explanatory (do not transform file from these places).

4. output - the final bundle you want to create. if you specify for example

输出：{
filename：[name] .bundle.js，
vendor：react
}

output: { filename: "[name].bundle.js", vendor: "react" }

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

Then your application js files will be bundled as main.bundle.js and react in a vendor.js files. It is an error if you do not use both in html page.

希望帮助

这篇关于webpack加载器和包括的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！