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, important ones are

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.

Hope it helped