vuejs / vue-loader

📦 Webpack loader for Vue.js components
MIT License
4.99k stars 915 forks source link

feat: support experimental inline match resource #2046

Closed h-a-n-a closed 1 year ago

h-a-n-a commented 1 year ago

This PR leverages inline match resource, a new technique provided by Webpack@5 to process modules, which allows loader developers to write more ergonomic code and make the code easier to maintain. From now on, you can enable options.experimentalInlineMatchResource of vue-loader to give it a try.

Other minor changes:

  1. Dispatch VueLoaderPlugin dynamically to decouple webpack and support webpack-like plugin systems.
  2. Webpack@5 experiments.css support

Note: The ideal solution with inline match resource is to get rid of the VueLoaderPlugin completely, I will try to optimize this in the future.

h-a-n-a commented 1 year ago

@sodatea Hi, I haven't finished the final touch yet. But I have some questions about how this new feature will be integrated into the codebase. This feature, to me, is supposed to be enabled via some options like experimentalInlineMatchResource or something like this. However, this function affects both the implementation of plugin and loader, so I guess it will be better to configure in both plugin and loader(from the perspective of developer), or there might be some hacks. Which one do you prefer? Another question is the option experiments.css provided by Webpack. Currently, I decide to detect the option automatically, is it necessary to provide another option for that? Thank you for the help in advance!

haoqunjiang commented 1 year ago

Which one do you prefer?

I'm okay with configuring it in both the plugin and loader. Most users won't need to configure the loader/plugin by themselves anyway.

Currently, I decide to detect the option automatically, is it necessary to provide another option for that?

I think automatic detection is better.

h-a-n-a commented 1 year ago

@sodatea Firstly, thank you for the help! This PR is ready to review. I decide to leverage the old hack to make all possible configuration to vue-loader itself. So options.experimentalInlineMatchResource will only be exposed to the loader option (I think that will be enough as most of the user only want compilation-wise options). Secondly, the old rule modification will work with either inline match resource enabled or not, but only the new rule modification will apply with inline match resource enabled. One more thing, webpack's experiments.css has some limitations with the current implementation, as inline and module will not work (requires javascript), however scoped is working as intended. Hope I can add some tests in the future PR.

h-a-n-a commented 1 year ago

@sodatea Hi, CI workflow has been fixed. Would you please take a look again? :)