Adding Custom Loaders & Plugins with Webpack Encore

Adding Custom Loaders

Encore already comes with a variety of different loaders, but if there is a specific loader that you want to use that is not currently supported, you can add your own loader through the addLoader function. The addLoader takes any valid webpack rules config.

If, for example, you want to add the handlebars-loader, call addLoader with your loader config

1
2
3
4

Encore
    // ...
    .addLoader({ test: /\.handlebars$/, loader: 'handlebars-loader' })
;

Since the loader config accepts any valid Webpack rules object, you can pass any additional information that you need for the loader:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

Encore
    // ...
    .addLoader({
        test: /\.handlebars$/,
        loader: 'handlebars-loader',
        options: {
            helperDirs: [
                import.meta.dirname + '/helpers1',
                import.meta.dirname + '/helpers2',
            ],
            partialDirs: [
                path.join(import.meta.dirname, 'templates', 'partials')
            ]
        }
    })
;

Adding Custom Plugins

Encore uses a variety of different plugins internally. But, you can add your own via the addPlugin() method. For example, if you use Moment.js, you might want to use the IgnorePlugin (see moment/moment#2373):

1
2
3
4
5
6
7
8
9
10
11

// webpack.config.js
+ import webpack from 'webpack';

  Encore
      // ...

+     .addPlugin(new webpack.IgnorePlugin({
+         resourceRegExp: /^\.\/locale$/,
+         contextRegExp: /moment$/,
+     }))
  ;