html-webpack-plugin
html-webpack-plugin copied to clipboard
jantimon
feat: add js-entry-webpack-plugin to readme
Hi, this PR is mainly to solve the problem when choosing js file as project entry especially in a Micro Frontend Project
And the source code is inspired by html-webpack-plugin
Usage:
import JSEntryWebpackPlugin from 'js-entry-webpack-plugin'
module.exports = {
entry: 'index.js',
output: {
path: __dirname + '/dist',
},
plugins: [new JSEntryWebpackPlugin()],
}
Thanks for checking, if possible, add it on the awesome list which can be convenient for others
Related Issue: #1699
I am really sorry but I don't understand what you mean.
What problem does your plugin solve?
@jantimon sorry didn't make it clear.
In micro frontend architecture, the micro project can provide js file as its entry, which will later be loaded, mounted and unmounted by the base project (find more at single-spa)
In this condition, if the js entry like index.tsx import some css file, and after building, the css entry file will be ignored coz html-webpack-plugin is nowhere to use to collect the css entry bundle
This plugin inserts js fragment to create link tag in built js entry, which can load the css entry bundle so as not to make any break change to the project
wow really cool that you managed to publish the plugins 🎉
unfortunately your plugin seems to be not a plugin for the html-webpack-plugin so I guess it's not well suited for the list of plugins for html-webpack-plugin in the readme..
I tried to understand your plugin but it's still quite hard to understand (probably because I have never used single-spa)
Why is it called js-entry if it's a solution for css files?
Did you know that there are already multiple solutions to extract different css assets in webpack? all of them are supported by the html-webpack-plugin
the html-webpack-plugin will not ignore css files
@jantimon Hi and thanks
Let's put it this way. Leave the brilliant template features of html-webpack-plugin aside, another problem that it solving is to collect the entry bundles into template file, such as js and css
And my plugin is not actually to extract some css assests but to collect them. As I mentioned above, if a Micro project generates a index.js and a extracted index.hash8.css, this is no place to load the css entry coz the base project only loads microA's js entry url
Finally, my plugin is inspired by html-webpack-plugin, kind of an offspring of it, and solves the problem using js (not js file which finally generates html code) as a template, can enlarge the feature for html-webpack-plugin. And that's why this PR goes
Thanks anyway~
Hm but wouldn't such an approach slow down the page load because of the watefall loading?
- transfer single-spa
- parse single-spa
- execute single-spa
- detect App1
- load App1.js
- parse App1.js
- execute App1.js
- detect css load code
- load App1.css
- parse App1.css
- execute App1.css
@jantimon I think it is a normal thing coz the entry.css is required, like html template does, may generates like
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Example template</title>
<script defer="defer" src="bundle.js"></script>
<link href="styles.css" rel="stylesheet" />
</head>
<body></body>
</html>
And for that, we can insert the css link script at the end of js source, which may help a little to the profermance
Moreover, the enterprise-ready micro solutions like qiankun and garfish all provide prefetch apps api, which can be enabled at a passing of a config
And also, if you have some better ideas to this js entry problem, glad to hear
I believe this could also be done with a custom html-webpack-plugin however a dedicated plugin might be totally fine in that case.
To load the css directly you could use the https://webpack.js.org/loaders/style-loader/ which would pack the css right into your js file.
