icelam/html-inline-script-webpack-plugin

PIXI js v.8

Opened this issue · 1 comments

jkukuryk commented

Environment and package version

"webpack": "^5.42.1",
"webpack-merge": "^5.8.0",
"html-inline-script-webpack-plugin": "^3.0.0",
"html-webpack-plugin": "^5.3.2",
"esbuild": "^0.12.14",

"pixi.js": "8.0.2",

Reproduction small git repo:

https://github.com/jkukuryk/pixi-version-update

Steps to reproduce

  1. download the repo
  2. run npm run build

What is expected?

code has 4-5 js chunks

What is actually happening?

After updating pixi.js to v.8 webpack creates chunks (works fine on lower versions of pixi.js)

Related topic on PIXI.js v8 migration:
pixijs/pixijs#10344 (reply in thread)

In PixiJS v8, we are using a lot more dynamic imports to help minimize the amount of code that needs to be loaded up front. In order to inline all the code, you need a way to disable dynamic imports. Perhaps a feature request for the Webpack plugin?"

icelam commented

Hi @jkukuryk, I apologize for the inconvenience you're experiencing with the plugin while using PIXI.js v8.

It seems that the issue stems from the usage of dynamic import in PIXI.js, which poses a challenge for this plugin to handle effectively. The plugin relies on the alterAssetTags hook provided by html-webpack-plugin to receive information about script assets. This plugin currently does not handle code transformation. Instead, it loops through the <script> tag information provided by html-webpack-plugin and converts the tag containing the src attribute into the body of that <script> tag.

According to the sequence diagram in the html-webpack-plugin documentation, the event for alterAssetTags occurs after webpack has compiled and minified/uglified the assets. It would be quite complex for the plugin to maintain logics that identify dynamic import patterns and perform code transformation.

In this situation, I recommend exploring alternative solutions such as:

  • Babel, a widely-used tool for code transpilation.
  • Communicating with the PIXI.js team to explain the difficulties faced with dynamic import and inquire if they can provide an alternative approach or version in their upcoming releases.

I would greatly appreciate it if you could inform me of any successful approaches you discover. If you have any further questions or need additional assistance, I would be happy to help. I will also update the README to clarify the limitations of this plugin.

  • ❤️1