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

Answer 1

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 2

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
}

Answer 3

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