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

    }