webpack loaders and include

Question

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

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

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?

Answer 1

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

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

• include - defines the set of path or files where the imported files will be transformed by the loader.

• exclude - do not transform file from these places.

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

Hope it helped

Answer 2

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

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

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.

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

    }

Answer 3

1) Correct.

2) Correct.

3) Correct.

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

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

5) Correct.

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:

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