feature #11075 Encore (advanced): add documentation for `configureLoa…

…derRule()` method (Kocal, Lyrkan, weaverryan)

This PR was merged into the 3.4 branch.

Discussion
----------

Encore (advanced): add documentation for `configureLoaderRule()` method

Hey,

This PR add a new entry in the advanced configuration of Webpack Encore, which explains how to use the new method `configureLoaderRule()`.

Ref: symfony/webpack-encore#509

Commits
-------

e3d43b9 minor tweak
71fd3b7 Apply suggestions from code review
c02322c Encore (advanced): add documentation for `configureLoaderRule()` method

frontend/encore/advanced-config.rst

@@ -170,6 +170,47 @@ normally use from the command-line interface:
         keepPublicPath: true,
     });
 
+Having the full control on Loaders Rules
+----------------------------------------
+
+The method ``configureLoaderRule()`` provides a clean way to configure Webpack loaders rules (``module.rules``, see `Configuration <https://webpack.js.org/concepts/loaders/#configuration>`_).
+
+This is a low-level method. All your modifications will be applied just before pushing the loaders rules to Webpack.
+It means that you can override the default configuration provided by Encore, which may break things. Be careful when using it.
+
+One use might be to configure the ``eslint-loader`` to lint Vue files too.
+The following code is equivalent:
+
+.. code-block:: javascript
+
+    // Manually
+    const webpackConfig = Encore.getWebpackConfig();
+
+    const eslintLoader = webpackConfig.module.rules.find(rule => rule.loader === 'eslint-loader');
+    eslintLoader.test = /\.(jsx?|vue)$/;
+
+    return webpackConfig;
+
+    // Using Encore.configureLoaderRule()
+    Encore.configureLoaderRule('eslint', loaderRule => {
+        loaderRule.test = /\.(jsx?|vue)$/
+    });
+
+    return Encore.getWebpackConfig();
+
+The following loaders are configurable with ``configureLoaderRule()``:
+  - ``javascript`` (alias ``js``)
+  - ``css``
+  - ``images``
+  - ``fonts``
+  - ``sass`` (alias ``scss``)
+  - ``less``
+  - ``stylus``
+  - ``vue``
+  - ``eslint``
+  - ``typescript`` (alias ``ts``)
+  - ``handlebars``
+
 .. _`configuration options`: https://webpack.js.org/configuration/
 .. _`Webpack's watchOptions`: https://webpack.js.org/configuration/watch/#watchoptions
 .. _`array of configurations`: https://github.com/webpack/docs/wiki/configuration#multiple-configurations