Loader Definitions

Webpack provides multiple ways to set up module loaders. I'll cover the most important ones next. Generally you either use loader (accepts string) or loaders field (accepts array of strings) and then pass possible query parameters using one of the available methods.

I recommend maintaining an include definition per each loader definition. This will restrict its search path, improve performance, and make your configuration easier to follow. include accepts either a path or an array of paths.

It can be a good idea to prefer absolute paths here as it allows you to move configuration without breaking assumptions. Ideally you have to tweak just a single place during restructuring.

Loader Evaluation Order

It is good to keep in mind that Webpack's loaders are always evaluated from right to left and from bottom to top (separate definitions). The right to left rule is easier to remember when you think about it in terms of functions. You can read definition loaders: ['style', 'css'] as style(css(input)) based on this rule. The following examples are equivalent as well:

{
  test: /\.css$/,
  loaders: ['style', 'css'],
  include: PATHS.app
}
{
  test: /\.css$/,
  loaders: ['style'],
  include: PATHS.app
},
{
  test: /\.css$/,
  loaders: ['css'],
  include: PATHS.app
}

The loaders of the latter definition could be rewritten in the query format discussed above after performing a split like this.

Passing Parameters to a Loader

Sometimes you might want to pass query parameters to a loader. By default you could do it through a query string:

{
  test: /\.jsx?$/,
  loaders: [
    'babel?cacheDirectory,presets[]=react,presets[]=es2015'
  ],
  include: PATHS.app
}

The problem with this approach is that it isn't particularly readable. A better way is to use the combination of loader and query fields:

{
  test: /\.jsx?$/,
  loader: 'babel',
  query: {
    cacheDirectory: true,
    presets: ['react', 'es2015']
  },
  include: PATHS.app
}

This approach becomes problematic with multiple loaders since it's limited just to one loader at a time. If you want to use this format with multiple, you need separate declarations.

T> Another way to deal with query parameters would be to rely on Node.js querystring module and stringify structures through it so they can be passed through a loaders definition.

Conclusion

Webpack provides multiple ways to set up loaders. You should be careful especially with loader ordering. Sometimes naming (i.e, loader vs. loaders) can cause mysterious issues as well.

I will discuss specific assets types and how to load them using Webpack next.

results matching ""

    No results matching ""