Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: add js-entry-webpack-plugin to readme #1732

Merged
merged 1 commit into from Aug 7, 2023
Merged

feat: add js-entry-webpack-plugin to readme #1732

merged 1 commit into from Aug 7, 2023

Conversation

liam61
Copy link
Contributor

@liam61 liam61 commented Feb 16, 2022

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

@jantimon
Copy link
Owner

I am really sorry but I don't understand what you mean.

What problem does your plugin solve?

@liam61
Copy link
Contributor Author

liam61 commented Feb 16, 2022

@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

@jantimon
Copy link
Owner

jantimon commented Feb 16, 2022 •
edited

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

@liam61
Copy link
Contributor Author

liam61 commented Feb 17, 2022

@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~

@jantimon
Copy link
Owner

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

@liam61
Copy link
Contributor Author

liam61 commented Feb 17, 2022

@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

@jantimon
Copy link
Owner

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.

@alexander-akait alexander-akait mentioned this pull request Jun 20, 2023
Closed
@alexander-akait
Copy link
Collaborator

Please rebase, thank you

@liam61 liam61 closed this Jun 25, 2023
@liam61 liam61 reopened this Jun 25, 2023
@liam61
Copy link
Contributor Author

liam61 commented Jun 25, 2023

@alexander-akait Hi, I rebased, plz check

@alexander-akait alexander-akait merged commit fe231d3 into jantimon:main Aug 7, 2023
1 check passed
chenjiahan added a commit to rspack-contrib/html-rspack-plugin that referenced this pull request Dec 22, 2023
@chenjiahan @alexander-akait
@liam61 @dyw934854565 @badrylin @helloitsjoe
Sync upstream changes (#3)
71e7f38 
* fix: reemit favicon in serve/watch mode (jantimon#1804)

* refactor: use logger to avoid pulling logs in output (jantimon#1805)

* refactor: avoid extra file (jantimon#1806)

* refactor: code (jantimon#1807)

* docs: improve (jantimon#1808)

* fix: avoid have undefined `type` for script tags (jantimon#1809)

* refactor: fix regression after refactor and testing (jantimon#1810)

* fix: reemit assets from loaders (jantimon#1811)

* test: case for watch/serve and reemitting assets (jantimon#1812)

* docs: add js-entry-webpack-plugin (jantimon#1732)

* chore(release): 5.5.4

* docs: add html-webpack-inject-attributes-plugin to readme (jantimon#1787)

* feat: Added support `type=systemjs-module` via the `scriptLoading` option (jantimon#1822)

* fix: memoy leak (jantimon#1836)

* feat: add `@rspack/core` as an optional peer dependency (jantimon#1829)

* chore(release): 5.6.0

---------

Co-authored-by: Alexander Akait <4567934+alexander-akait@users.noreply.github.com>
Co-authored-by: liam <lawler61@163.com>
Co-authored-by: alexander.akait <sheo13666q@gmail.com>
Co-authored-by: Yuwen Duan <dyw934854565@sina.com>
Co-authored-by: 坏人日记 <badry.lin@gmail.com>
Co-authored-by: Joe Boyle <jboyle617@gmail.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@alexander-akait alexander-akait alexander-akait approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

None yet
3 participants
@liam61 @jantimon @alexander-akait