Skip to content

Commit c02322c

Browse files
committed
Encore (advanced): add documentation for configureLoaderRule() method
1 parent 4e24442 commit c02322c

File tree

1 file changed

+41
-0
lines changed

1 file changed

+41
-0
lines changed

frontend/encore/advanced-config.rst

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -146,6 +146,47 @@ normally use from the command-line interface:
146146
keepPublicPath: true,
147147
});
148148
149+
Having the full control on Loaders Rules
150+
----------------------------------------
151+
152+
The method ``configureLoaderRule()`` provide a clean way to configure Webpack loaders rules (``module.rules``, see `Configuration <https://webpack.js.org/concepts/loaders/#configuration>`_).
153+
154+
This is a low-level method. Any of your modifications will be applied just before pushing the loaders rules to Webpack.
155+
It means that you can override configuration provided by Encore, so maybe you will break things. Be careful when using it.
156+
157+
A useful usage would be for configuring the ``eslint-loader`` to lint Vue files too.
158+
The following code is equivalent:
159+
160+
.. code-block:: javascript
161+
162+
// Before
163+
const webpackConfig = Encore.getWebpackConfig();
164+
165+
const eslintLoader = webpackConfig.module.rules.find(rule => rule.loader === 'eslint-loader');
166+
eslintLoader.test = /\.(jsx?|vue)$/;
167+
168+
return webpackConfig;
169+
170+
// After
171+
Encore.configureLoaderRule('eslint', loaderRule => {
172+
loaderRule.test = /\.(jsx?|vue)$/
173+
});
174+
175+
return Encore.getWebpackConfig();
176+
177+
The following loaders are configurable with ``configureLoaderRule()``:
178+
- ``javascript`` (alias ``js``)
179+
- ``css``
180+
- ``images``
181+
- ``fonts``
182+
- ``sass`` (alias ``scss``)
183+
- ``less``
184+
- ``stylus``
185+
- ``vue``
186+
- ``eslint``
187+
- ``typescript`` (alias ``ts``)
188+
- ``handlebars``
189+
149190
.. _`configuration options`: https://webpack.js.org/configuration/
150191
.. _`Webpack's watchOptions`: https://webpack.js.org/configuration/watch/#watchoptions
151192
.. _`array of configurations`: https://github.com/webpack/docs/wiki/configuration#multiple-configurations

0 commit comments

Comments
 (0)