feat: Add method to configure loaders rules

[Kocal]

This PR is a proposal to resolve #473 and #504 in a clean way.

Encore.configureLoaderRule() is a low-level function, and has for goal to let the user having full access to Webpack loaders rules (what we push into module.rules) and configure them.

This is the implementation of the idea I had in #504 (comment).

For resolving Vue files linting issue, the next example would be the ideal solution I think:

Encore
  .configureLoaderRule('eslint', loader => {
    loader.test = /\.(jsx?|vue)$/
  });

// actually, the equivalent code is something like this:
const webpackConfig = Encore.getWebpackConfig();
const eslintLoader = webpackConfig.module.rules.find(rule => rule.loader === 'eslint-loader');

eslintLoader.test = /\.(jsx?|vue)$/;

return webpackConfig;

For now, only ESLint loader is supported, but we can easily add other loaders.

Let me know what you think of this solution, thanks!

[Lyrkan]

Hi @Kocal,

I didn't review this sooner because I was a bit skeptical about that new method... but all things considered it may not be a bad idea.

My main concern was that it would be really tied to Encore's internals.
For instance we recently changed the css-loader rule in order to support css modules (and there is a pending PR to do the same for the sass-loader, the less-loader and the stylus-loader).
If your method were already available before that change and someone used it to do something like configureLoaderRule('css', (loader) => { /* manipulate loader.use */ }) it would end up not working anymore (use doesn't exist at the root level anymore).

But since I also think that most people will use it to change the test part of the rule (which shouldn't change much) and that there is a warning about it being a low-level function... I'm not against adding it for the following rules:

• js (or javascript?)
• css
• images
• fonts
• sass (and maybe an alias to scss?)
• less
• stylus
• vue
• eslint
• ts (or typescript?)
• handlebars

@weaverryan: What's your opinion on this?

[Kocal]

The implementation (with tests) is done for:

• javascript and its alias js
• css
• images
• fonts
• sass and its alias scss
• less
• stylus
• vue
• eslint
• typescript and its alias ts
• handlebars

[Kocal]

By the way, should I start working (now) on a PR for symfony/symfony-docs?

[weaverryan]

Hey @Kocal!

I'm for this change - it's one of the ugliest things to try to hack into the Encore config. I merged a PR ahead of this - could you fix the conflict?

About the docs, I think the feature is already mostly documented in the code (you've done a nice job). But, I think it would probably be worth mentioning here https://symfony.com/doc/current/frontend/encore/advanced-config.html

Thanks!

[Kocal]

Hey,

I totally fucked up my rebase+force push, I didn't checked that my local branch was outdated and commits were reduced from ~10 to 3 😅 Thanks to Travis and GitHub, I was able to retrieve what I've done (even if that's not really funny to manually apply 7 patches).

Some of my tests broke due to last changes on Encore (in particular Sass, SCSS, Stylus... loaders). I will fix them and ping you when I finished.

Also, I will work ASAP on a PR for symfony-docs :)

[Kocal]

PR opened on symfony/symfony-docs#11075

[Kocal]

Friendly bump 👀

[weaverryan]

Thank you @Kocal!