search

webdiscus / html-bundler-webpack-plugin

Alternative to html-webpack-plugin ✅ Renders Eta, EJS, Handlebars, Nunjucks, Pug, Twig templates "out of the box" ✅ Resolves source files of scripts, styles, images in HTML ✅ Uses a template as entry point
ISC License
138 stars 14 forks source link

RSPack support and compatibility #55

Open KrzysztofZawisla opened 10 months ago

KrzysztofZawisla commented 10 months ago

Feature request

What is motivation or use case for adding/changing the behavior? Would be nice to add compatibility with rspack ecosystem as many other webpack plugins are already compatible with rspack. In my project, it's the only plugin that is incompatible with rspack and doesn't have any other equivalent

Useful links: https://www.rspack.dev/

Describe the solution you'd like Resolve the error on the attached screenshot

rspack

Describe alternatives you've considered None

KrzysztofZawisla commented 10 months ago

By the fact that there's no alternative in the ecosystem I mean no alternative which is able to preload assets (CSS, scripts, fonts, etc.)

webdiscus commented 10 months ago

Hello @KrzysztofZawisla,

thanks for the feature request! I don't use rspack (yet), but I'm thinking of using it in the future (next year) and I will optimize the plugin for rspack.

webdiscus commented 10 months ago

@KrzysztofZawisla

can you please create a repo with reproducible issue. I'll see whether the problem is difficult. Perhaps this is not such complex and I can quickly fix it.

davidmurdoch commented 9 months ago

I think RSPack will need to catch up on webpack features and internal hooks. I doubt there is anything html-bundler-webpack-plugin can do.

Rspack chokes on this simple config:

// 1. create `./src/index.html` with an empty, but valid, HTML5 document
// 2. create `./webpack.config.js`
// 3. run `npx -y @rspack/cli --config webpack.config.js`

const HtmlBundlerPlugin = require('html-bundler-webpack-plugin');

const config = {
    mode: "development",
    entry: {
        index: './src/index.html'
    },
    plugins: [
        new HtmlBundlerPlugin()
    ]
};
module.exports = config;

The error I get is:

Error: Napi Error: Failed to convert JavaScript value `function anonymous(..) ` into rust type `String`

    at Compiler._Compiler_getInstance (/home/david/.npm/_npx/89e5cd2d45bac79e/node_modules/@rspack/core/dist/Compiler.js:516:55)
    at Compiler.build (/home/david/.npm/_npx/89e5cd2d45bac79e/node_modules/@rspack/core/dist/Compiler.js:380:87)
    at /home/david/.npm/_npx/89e5cd2d45bac79e/node_modules/@rspack/core/dist/Compiler.js:347:26
    at Hook.eval [as callAsync] (eval at create (/home/david/.npm/_npx/89e5cd2d45bac79e/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/home/david/.npm/_npx/89e5cd2d45bac79e/node_modules/tapable/lib/Hook.js:18:14)
    at /home/david/.npm/_npx/89e5cd2d45bac79e/node_modules/@rspack/core/dist/Compiler.js:343:32
    at Hook.eval [as callAsync] (eval at create (/home/david/.npm/_npx/89e5cd2d45bac79e/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/home/david/.npm/_npx/89e5cd2d45bac79e/node_modules/tapable/lib/Hook.js:18:14)
    at doRun (/home/david/.npm/_npx/89e5cd2d45bac79e/node_modules/@rspack/core/dist/Compiler.js:339:34)
    at Compiler.run (/home/david/.npm/_npx/89e5cd2d45bac79e/node_modules/@rspack/core/dist/Compiler.js:375:13) {
  code: 'GenericFailure'
}

But even if you remove HtmlBundlerPlugin, switch to a JavaScript entry, and start adding webpack config options, like cache: object, it will error, as it expects cache to be a Boolean. There are many other options it doesn't support (optimization.moduleIds = "size", output.chunkFilename = function, symlinks: false, and more.

exocornet commented 6 months ago

Hello. I'm also trying to switch to RSPack and have the same problem with the plugin. I would like to see support in the near future. Essentially he is complaining about pug-plugin joining the RSPack ecosystem. Thank you.

P.S. - I'm trying to do it myself for pug-plugin.

webdiscus commented 6 months ago

@KrzysztofZawisla, @davidmurdoch, @exocornet

Currently, RSPack v0.5.6 is yet not 100% compatible with the Webpack.

Using the html-bundler-webpack-plugin with RSPack occurs the issue:

/Users/xxxx/html-bundler-webpack-plugin/experiments/rspack/node_modules/@rspack/core/dist/Compiler.js:518
    __classPrivateFieldSet(this, _Compiler_instance, new instanceBinding.Rspack(rawOptions, this.builtinPlugins, {
                                                     ^

Error: Failed to convert JavaScript value `function filenameFn(..) ` into rust type `String`

    at Compiler._Compiler_getInstance (/Users/xxxx/html-bundler-webpack-plugin/experiments/rspack/node_modules/@rspack/core/dist/Compiler.js:518:54)
    at Compiler.build (/Users/xxxx/html-bundler-webpack-plugin/experiments/rspack/node_modules/@rspack/core/dist/Compiler.js:384:87)
    at /Users/xxxx/html-bundler-webpack-plugin/experiments/rspack/node_modules/@rspack/core/dist/Watching.js:263:23
    at Hook.eval [as callAsync] (eval at create (/Users/xxxx/html-bundler-webpack-plugin/experiments/rspack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:24:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/Users/xxxx/html-bundler-webpack-plugin/experiments/rspack/node_modules/tapable/lib/Hook.js:18:14)
    at Watching._Watching_go (/Users/xxxx/html-bundler-webpack-plugin/experiments/rspack/node_modules/@rspack/core/dist/Watching.js:253:34)
    at Watching._Watching_invalidate (/Users/xxxx/html-bundler-webpack-plugin/experiments/rspack/node_modules/@rspack/core/dist/Watching.js:217:74)
    at /Users/xxxx/html-bundler-webpack-plugin/experiments/rspack/node_modules/@rspack/core/dist/Watching.js:51:94
    at process.processTicksAndRejections (node:internal/process/task_queues:77:11) {
  code: 'GenericFailure'
}

This is a BUG on the RSPack side.

Here is the minimal usage example rspack-html-bundler.

rspack.config.js

const path = require('path');
const HtmlBundlerPlugin = require('html-bundler-webpack-plugin');

module.exports = {
  output: {
    path: path.join(__dirname, 'dist/'),
    publicPath: '',
  },

  entry: {},

  plugins: [
    // TODO: fix rspack issue
    new HtmlBundlerPlugin({
      entry: {
        index: './src/template.html',
      },
    }),
  ],
};

How to reproduce

git clone https://github.com/webdiscus/html-bundler-webpack-plugin.git
cd html-bundler-webpack-plugin/experiments/rspack
npm i
npm run dev

Please, can you create an issue by the RSPack to add the compatibility with this plugin.

📌 Note A symbiosis of the fast RSPack and the powerful html-bundler-webpack-plugin could be a Vite killer.

elseify commented 3 weeks ago

Hello, Rspack 1.0 has been released! Can you try to add his support again?)

webdiscus commented 3 weeks ago

Hi @elseify,

Rspack 1.0 is not yet compatible with core webpack features.

Rspack implements "~10%" of the core (mandatory) features of Webpack, so it is not possible to make this powerful Webpack plugin compatible with Rspack. In fact, Rspack lacks important Webpack features.

I checked the new version and saw many missing features that the plugin uses.

elseify commented 3 weeks ago

I understand, it's sad of course. Webpack has become too slow

webdiscus commented 3 weeks ago

Webpack has become too slow

For using Webpack with React or Vue, yes, is too slow. But it is the problem of the React with a lot of components, not Webpack ;-)

Webpack is ideal to generate classic (old school) HTML pages, w/o modern monster frameworks.

For example, I have for my project over 50 templates (Pug, Handlebars, etc.) and to compile all pages with JS, SCSS, takes ca. 8-10 seconds (M1 Pro). In dev (watch/serve) mode recompilation after changes takes ca. 0.3-0.9 seconds. It's ok.

P.S. For React/Vue there is a very cool Vite.

P.S.S. can you please describe your project: