How to add polyfill to currentScript to be compatible with IE

[zzkkui]

I found the documentation

and then I added currentScript polyfill to entry

entry: {
	main:[path.join(__dirname, '../src/util/currentScript.js'), path.join(__dirname, '../src/index.jsx')],
}

But the built file first executes webpack runtime, and then executes the currentScript polyfill. so there is a problem. Document.currentScript is used in the webpack runtime. In IE, because the webpack runtime is executed first, and the currentScript polyfill is executed later, we get The publicPath is wrong.

I tried to execute the currentScript polyfill before webpack runtime in the built file. This can introduce static files normally in IE, so there should be no problem with currentScript polyfill, but it should be inserted and executed before webpack runtime.

Is there any configuration method to make currentScript polyfill execute before webpack runtime?

Anyway looking forward to reply， thanks

[zzkkui]

The result of my build is that a js is referenced by other js, without html

[zzkkui]

Sorry I didn't describe it clearly. The files I built don't need html because I provide plug-ins for other web pages to load.

In IE, when this web page loads the static files I provided, only the entry file will be loaded correctly. When other resource records (loaded through the entry files I provided), the paths are not correct.

Not sure if you understand what I'm describing.

[alexander-akait]

You can write polyfill in your JS code before webpack runtime code, like just concat two files

[zzkkui]

you mean to manually add polyfill to the built file?

What I do now is to use BannerPlugin，I tried to look for other webpack configurations that will execute polyfill before webpack runtime execution, but couldn't find any, if there are any, please do let me know.

If webpack does not have this configuration (I think using BannerPlugin is just a hack), should webpack consider supporting configuration of custom code to be executed before runtime?

thanks

[alexander-akait]

You can just create a simple plugin which add a custom code at the top of your runtime chunk(s), we don't officially support dead browsers (which doesn't support currentScript), IE11 is officialy dead, around 98%-99% users don't need this, the rest are bots and any automation systems (most of them without JS), so you have two solution:

1. Just add a script tag before webpack code in your HTML file
2. Use multi compiler mode, i.e.

module.exports = [
 {
   name: "polyfills",
   entry: "./src/polyfills.js",
   target: ["web", "es3"]
   output: {
     // Avoid using `currentScript`
     publicPath: "/"
   }
   // Other options
 },
 {
   name: "application",
   dependecies: ["polyfill"]
   entry: "./src/app.js"
   // Other options
 }
]

Also you can apply more aggressive optimizations for the polyfills

In theory I can implement currentScript replacting on own logic, but IE11 is dead and I don't think a lot of developers really need this

[zzkkui]

I agree that ie is dead, individual projects need support ie makes me miserable

Thank you for your answer 👏