In vue-cli5, plugin will conflict with html-webpack-plugin.

321638914 commented 10 months ago

When I using this plugin with vue-cli5, vue-cli-service serve and vue-cli-service build will throw error:

Error: Child compilation failed:
  Module parse failed: Unexpected token (1:0)
  File was processed with these loaders:
   * ./node_modules/.pnpm/html-webpack-plugin@5.5.3_webpack@5.88.2/node_modules/html-webpack-plugin/lib/loader.js
   * ./node_modules/.pnpm/unplugin@1.5.0/node_modules/unplugin/dist/webpack/loaders/transform.js
  You may need an additional loader to handle the result of these loaders.
  > <!DOCTYPE html>
  | <html lang="">
  |   <head>

I found html-webpack-plugin/lib/loader.js will check if there is any other loader, if exists it will return unmodified source, which cause error. After some dig, I found add transformInclude hook and /\.html/ to plugin exclude config, unplugin will not create the loader which conflict with html-webpack-plugin and solve issue. But it also mean this plugin cant process html code. Maybe there is better way to fix this?

KeJunMao commented 10 months ago

try this:

https://github.com/KeJunMao/unplugin-preprocessor-directives/blob/main/examples/vue-cli/vue.config.js#L11-L20

KeJunMao commented 10 months ago

example:

https://github.com/KeJunMao/unplugin-preprocessor-directives/blob/main/examples/vue-cli/public/index.html#L10-L12

321638914 commented 10 months ago

Thanks for fix! But I get another issue: the default include option of this plugin is **/*, which will include asset file like png and jpeg. In webpack environment, this plugin will change asset file content, so my image files can't display at all. I need to change include option to include: ['**/*.js', '**/*.ts'] to fix this problem. Vite environment work fine.

KeJunMao commented 10 months ago

Yes, We do need better defaults, do you have any suggestions?

KeJunMao / unplugin-preprocessor-directives

In vue-cli5, plugin will conflict with html-webpack-plugin. #2