Javascript webpack 加载器并包含

webpack loaders and include

提问by devwannabe

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

我是 webpack 的新手，我正在尝试了解加载器及其属性，例如测试、加载器、包含等。

Here is a sample snippet of webpack.config.js that I found in google.

这是我在 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. Am I right that test: /.js$/ will be used only for files with extension .js?

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

3. 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.

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

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

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

1. 我的测试是否正确：/.js$/ 将仅用于扩展名为 .js 的文件？

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

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

4. 更多关于 include 的问题：当文件被转译时，*.js 文件是否连接成一个大文件？

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

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

采纳答案by sandeep

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

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

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

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

   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.

1. entry - 可以是定义要捆绑的资产的入口点的数组或对象，也可以是 js，因为这里的测试说仅针对 /.js$ 执行此操作。如果您的应用程序有多个入口点，则使用一个数组。
2. include - 定义加载器将在其中转换导入文件的路径或文件集。
3. exclude 是不言自明的（不要从这些地方转换文件）。

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

   输出：{ 文件名：“[名称].bundle.js”，供应商：“反应”}

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

Hope it helped

希望有帮助

回答by zechdc

This documentation helped me understand better. Looks like it is for webpack 1 but still applies.

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

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

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

Loaders

An array of automatically applied loaders.

Each item can have these properties:

• test:A condition that must be met
• exclude:A condition that must not be met
• include:An array of paths or files where the imported files will be transformed by the loader
• loader:A string of “!” separated loaders
• loaders:An array of loaders as string

装载机

一系列自动应用的加载器。

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

• 测试：必须满足的条件
• exclude：不能满足的条件
• 包括：加载器将在其中转换导入文件的路径或文件数组
• loader：一串“！” 分离装载机
• loaders: 加载器数组作为字符串

This example helped me understand what is going on. Looks like you use either include or exclude but not both. The test is a condition applied to all files. So if you include a folder, each file must pass the test condition. I have not verified this, but based on the example provided by the documentation, it look like that is how it works.

这个例子帮助我理解发生了什么。看起来您使用 include 或 exclude 但不能同时使用。测试是应用于所有文件的条件。所以如果你包含一个文件夹，每个文件都必须通过测试条件。我尚未验证这一点，但根据文档提供的示例，它看起来就是这样工作的。

    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
        }
      ]

    }

回答by Ethan Clark

1) Correct.

1) 正确。

2) Correct.

2）正确。

3) Correct.

3）正确。

4) I am unsure. My webpack.config.js file includes an output key, and does bundle it all into one file:

4）我不确定。我的 webpack.config.js 文件包含一个输出键，并将其全部捆绑到一个文件中：

output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'bundle.js'
}

5) Correct.

5）正确。

6) This tells babel-loader what sort of transpile you want it to perform, as well as other compile options. So, for example, if you want it to transpile jsx as well + cache results for improve performance, you would change it to:

6) 这告诉 babel-loader 你希望它执行什么样的转换，以及其他编译选项。因此，例如，如果您希望它也转译 jsx + 缓存结果以提高性能，您可以将其更改为：

query: {
    presets: ['react', 'es2015'],
    cacheDirectory: true
}