From c02322c1252b44f066f4362982cd4e0bced42b12 Mon Sep 17 00:00:00 2001 From: Hugo Alliaume Date: Fri, 1 Mar 2019 19:06:58 +0100 Subject: [PATCH 1/3] Encore (advanced): add documentation for `configureLoaderRule()` method --- frontend/encore/advanced-config.rst | 41 +++++++++++++++++++++++++++++ 1 file changed, 41 insertions(+) diff --git a/frontend/encore/advanced-config.rst b/frontend/encore/advanced-config.rst index 4f75b8671af..d93bcb9fb23 100644 --- a/frontend/encore/advanced-config.rst +++ b/frontend/encore/advanced-config.rst @@ -146,6 +146,47 @@ normally use from the command-line interface: keepPublicPath: true, }); +Having the full control on Loaders Rules +---------------------------------------- + +The method ``configureLoaderRule()`` provide a clean way to configure Webpack loaders rules (``module.rules``, see `Configuration `_). + +This is a low-level method. Any of your modifications will be applied just before pushing the loaders rules to Webpack. +It means that you can override configuration provided by Encore, so maybe you will break things. Be careful when using it. + +A useful usage would be for configuring the ``eslint-loader`` to lint Vue files too. +The following code is equivalent: + +.. code-block:: javascript + + // Before + const webpackConfig = Encore.getWebpackConfig(); + + const eslintLoader = webpackConfig.module.rules.find(rule => rule.loader === 'eslint-loader'); + eslintLoader.test = /\.(jsx?|vue)$/; + + return webpackConfig; + + // After + 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 From 71fd3b7306500df4394e6dc383bc531ea586472a Mon Sep 17 00:00:00 2001 From: Vincent Le Biannic <850046+Lyrkan@users.noreply.github.com> Date: Wed, 6 Mar 2019 20:02:28 +0100 Subject: [PATCH 2/3] Apply suggestions from code review Co-Authored-By: Kocal --- frontend/encore/advanced-config.rst | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/frontend/encore/advanced-config.rst b/frontend/encore/advanced-config.rst index d93bcb9fb23..85d242a2d8f 100644 --- a/frontend/encore/advanced-config.rst +++ b/frontend/encore/advanced-config.rst @@ -149,17 +149,17 @@ normally use from the command-line interface: Having the full control on Loaders Rules ---------------------------------------- -The method ``configureLoaderRule()`` provide a clean way to configure Webpack loaders rules (``module.rules``, see `Configuration `_). +The method ``configureLoaderRule()`` provides a clean way to configure Webpack loaders rules (``module.rules``, see `Configuration `_). -This is a low-level method. Any of your modifications will be applied just before pushing the loaders rules to Webpack. -It means that you can override configuration provided by Encore, so maybe you will break things. Be careful when using it. +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. A useful usage would be for configuring the ``eslint-loader`` to lint Vue files too. The following code is equivalent: .. code-block:: javascript - // Before + // Manually const webpackConfig = Encore.getWebpackConfig(); const eslintLoader = webpackConfig.module.rules.find(rule => rule.loader === 'eslint-loader'); @@ -167,7 +167,7 @@ The following code is equivalent: return webpackConfig; - // After + // Using Encore.configureLoaderRule() Encore.configureLoaderRule('eslint', loaderRule => { loaderRule.test = /\.(jsx?|vue)$/ }); From e3d43b96f2125714954ad21978ee28d768e892b9 Mon Sep 17 00:00:00 2001 From: Ryan Weaver Date: Mon, 25 Mar 2019 19:15:58 -0400 Subject: [PATCH 3/3] minor tweak --- frontend/encore/advanced-config.rst | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/encore/advanced-config.rst b/frontend/encore/advanced-config.rst index 85d242a2d8f..314eaf7903a 100644 --- a/frontend/encore/advanced-config.rst +++ b/frontend/encore/advanced-config.rst @@ -154,7 +154,7 @@ The method ``configureLoaderRule()`` provides a clean way to configure Webpack l 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. -A useful usage would be for configuring the ``eslint-loader`` to lint Vue files too. +One use might be to configure the ``eslint-loader`` to lint Vue files too. The following code is equivalent: .. code-block:: javascript