Adding Custom Loaders & Plugins with Webpack Encore
Adding Custom Loaders
Encore already comes with a variety of different loaders out of the box,
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 your 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: [
__dirname + '/helpers1',
__dirname + '/helpers2',
],
partialDirs: [
path.join(__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
+ var webpack = require('webpack');
Encore
// ...
+ .addPlugin(new webpack.IgnorePlugin({
+ resourceRegExp: /^\.\/locale$/,
+ contextRegExp: /moment$/,
+ }))
;
This work, including the code samples, is licensed under a
Creative Commons BY-SA 3.0
license.