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.

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

Using the new html-bundler-webpack-plugin to fix all issues #1

Merged
merged 1 commit into from Oct 3, 2023
Merged

Using the new html-bundler-webpack-plugin to fix all issues #1

merged 1 commit into from Oct 3, 2023

Conversation

webdiscus
Copy link
Contributor

@webdiscus webdiscus commented Sep 29, 2023

Hello @einazare,

it's solution for your issue Writing Your Own Templates section does not work.

I'm the author of the html-bundler-webpack-plugin and I want to demonstrate how is much easily to use the new modern plugin intead of "legacy" html-webpack-plugin.

Note using the html-bundler-webpack-plugin

  • an entry point is any HTML template
  • script and style source files should be specified directly in an HTML template
  • you can use any source asset files (fonts, images) in HTML using a relative path to HTML file or an alias
  • many popular template engines supported "out of the box" w/o additional plugins and loaders

Just one HTML bundler plugin replaces the functionality of the plugins and loaders:

  • html-webpack-plugin
  • mini-css-extract-plugin
  • html-loader
  • style-loader
  • and many others

Please see my comments in the PR.

P.S.:

To start your original command, use the

npm run start_

I have added "default" start command w/o opening a browser:

npm start

then open http://localhost:8080 in a browser

@webdiscus webdiscus changed the title Using the new html-bundler-webpack-plugin to fix all issuers Using the new html-bundler-webpack-plugin to fix all issues Sep 29, 2023
@@ -8,15 +8,22 @@
<title>
<%= title %>
</title>
<link rel="icon" href="favicon.ico">
<link rel="icon" href="./favicon.ico">
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

use relative path to source image file

// note: defaults, the template engine is `Eta`, to pass unescaped vars, use the `~` char instead of `=`
var locales = <%~ locales %>;
</script>
<script src="../src/index.js" defer="defer"></script>
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

specify source JS and SCSS/CSS files directly in HTML with path relative to HTML file

@einazare
Copy link
Owner

einazare commented Oct 3, 2023

Helll @webdiscus. Thank you for sharing this with me 🙏

@einazare
Copy link
Owner

einazare commented Oct 4, 2023

I've reverted it a bit, because I am curios to see if the guys from html-webpack-plugin know how to fix the issue 🙏

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants