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