webpack loaders and include

javascript ecmascript-6 webpack webpack-style-loader

73,010

Solution 1

In webpack config there are multiple things for configuration, 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 is self explanatory (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

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

    }

73,010

Author by

devwannabe

Updated on October 28, 2020

Comments

devwannabe over 3 years
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?
devwannabe over 8 years

I hope you can explain #3 more just like my above conversation with zerkms. Thanks!
Ethan Clark over 8 years

(EDIT: This is totally wrong) The files listed in include are the entrypoints you want webpack to begin compiling from. Code that is not referenced by these entrypoint files will not be included in webpack's output.
zerkms over 8 years

"The files listed in include are the entrypoints" --- they are not.
devwannabe over 8 years

Yup, it's not the entry point. There is a property called entry
derek almost 8 years

My question: if "example.js" file is imported by "entry.js" file. but this "example.js" is not included in loader's "include", will "example.js" be included in the final "bundle.js"?
kbtz almost 8 years

@derek will be included in the bundle however without any transformation since that import wasn't "included" as one that the loader should care about
Admin about 6 years

this include will help to include the header.html to index.html ? like this