make webpack-extraction-plugin and webpack-loader support webpack v4

[Leolewin]

Hi experts, I'm an engineer from Microsoft SharePoint_STCA SZ. Currently our team are doing some fluent v9 upgrade tasks. We find that fluent v9 uses griffel to support CSS-in-JS and provide some useful webpack loader or plugins to improve the performance. Unfortunately, these tools are designed for webpack 5, but our project uses webpack 4 and need large efforts to upgrade it to v5. So I tried to make it work on wbepack 4. This is a draft PR. Would you like to review and give us some comments?
@layershifter @ling1726

[Leolewin]

useless, will remove in next commit

[layershifter]

@Leolewin to be clear: supporting Webpack 4 is not our requirement that's why it's not there. Thanks for contributing 👍

---

Let's split this PR to have it separately for the loader and the plugin:

• changes to the loader are more obvious and simpler
  • it would be great to have it as a separate package i.e. webpack4-loader so we could have a cleaner way to deprecate & remove it in future
  • 👆good question how to avoid copy-paste in this case
• changes to the plugin should be redone as there is a refactor planned in chore: rework CSS extraction #277 (that will be merged soon)
• we need to figure how to test changes: ideally run the same tests for Webpack 4 & 5
  • we use Yarn in this repo, so we can alias install in the package.json, something like:

      "webpack4": "npm:[email protected]",
    

  • then use an alias in Jest to this module
  • not sure that this 👆 will work just an idea

[Leolewin]

@Leolewin to be clear: supporting Webpack 4 is not our requirement that's why it's not there. Thanks for contributing 👍

Let's split this PR to have it separately for the loader and the plugin:

• changes to the loader are more obvious and simpler

  • it would be great to have it as a separate package i.e. webpack4-loader so we could have a cleaner way to deprecate & remove it in future
  • 👆good question how to avoid copy-paste in this case

• changes to the plugin should be redone as there is a refactor planned in chore: rework CSS extraction #277 (that will be merged soon)

• we need to figure how to test changes: ideally run the same tests for Webpack 4 & 5

  • we use Yarn in this repo, so we can alias install in the package.json, something like:

      "webpack4": "npm:[email protected]",
    

  • then use an alias in Jest to this module
  • not sure that this 👆 will work just an idea

Hi @layershifter , really thanks for your great help and suggestions.

• I will split the change by loader and plugin and create 2 new PR later.
• I will modify and apply the related changes based on the latest code after the chore: rework CSS extraction #277 (that will be merged soon) been merged .
• Yes, I ignored the unit test before. Apologize for that negligence. I will make it complete and package alias sounds good to the multiple version scenario.

We fully understand why Griffel didn't take webpack v4 into consideration since it has been 2 years after v5 been released and widely used by community 😀. We also want to leverage the advantages in v5, but it's not a easy task since our repo are huge and unreasonable for just using a plugin. That's why I made these rash changes 🙈. Appreciated for you taking time to review and give the valuable feedback.

[layershifter]

@Leolewin looking forward to see the changed 👍 Another option is to have some utils like CompiledCSS does: https://github.com/atlassian-labs/compiled/blob/40211567504538272f726085e7b5f8c7c4eb2255/packages/webpack-loader/src/utils.ts#L70-L99

[layershifter]

@Leolewin all changes have been merged 😉

[layershifter]

@Leolewin FYI: I am upgrading the packages to use Linaria v4 (#309). We will use a Webpack loader from there and it supports Webpack 4. For @griffel/webpack-extraction-plugin we will still need to find another option.

[Leolewin]

@layershifter So sorry for the late reply. Apologized for been trapped in internal V9 upgrading investigation and POC tasks. I will see the changes in your new PR.

[layershifter]

Closing this for housekeeping 🏡 We can return to this later if needed.