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

docs: add new html-bundler-webpack-plugin to plugins list in README #18205

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

docs: add new html-bundler-webpack-plugin to plugins list in README #18205

wants to merge 1 commit into from

Conversation

webdiscus
Copy link
Contributor

What kind of change does this PR introduce?

  • Update README.md

Did you add tests for your changes?

  • Yes

Does this PR introduce a breaking change?

  • No

What needs to be documented once your changes are merged?

Summary

Hallo @sokra, hello @alexander-akait,

I have added the new modern html-bundler-webpack-plugin to the Plugin's list in the README.

Details

This plugin allows using a template file as an entry point.

The HTML Bundler generates static HTML or template function from any template (EJS, Handlebars, Nunjucks, Pug, etc.) containing source files of scripts, styles, images, fonts and other resources, similar to how it works in Vite.

Note

This plugin should increase the popularity of Webpack as it simplifies the creation of websites similar to Vite.
It is also a huge developer experience improvement as many things can be inferred from the HTML.

For example, the template contains references to source assets:

<html>
<head>
  <!-- source SCSS file -->
  <link href="./style.scss" rel="stylesheet">
  <!-- source TypeScript file -->
  <script src="./App.ts" defer="defer"></script>
</head>
<body>
  <!-- source image file -->
  <img src="./map.png">
</body>
</html>

The generated HTML contains the output filenames of the processed source files:

<html>
<head>
  <link href="assets/css/style.05e4dd86.css" rel="stylesheet">
  <script src="assets/js/app.f4b855d8.js" defer="defer"></script>
</head>
<body>
  <img src="assets/img/map.58b43bd8.png">
</body>
</html>

Very simple config using only one plugin:

const HtmlBundlerPlugin = require('html-bundler-webpack-plugin');

module.exports = {
  pugins: [
    new HtmlBundlerPlugin({
      // define a relative or absolute path to template pages
      entry: 'src/views/',
      
      // OR define templates manually
      entry: {
        index: {
          import: 'src/views/home.ejs', // EJS template => dist/index.html
          data: { title: 'Homepage' } // pass variables into template
        },
        'news/sport': 'src/views/news/sport/index.html', // => dist/news/sport.html
      },
      
      js: {
        // output filename of JS extracted from source script specified in `<script>`
        filename: 'assets/js/[name].[contenthash:8].js',
        inline: 'auto', // inline JS in dev mode, extract to file in production mode
      },

      css: {
        // output filename of CSS extracted from source file specified in `<link>`
        filename: 'assets/css/[name].[contenthash:8].css',
        inline: 'auto', // inline CSS in dev mode, extract to file in production mode
      },
    }),
  ],
};

The plugin supports template engines such as Eta, EJS, Handlebars, Nunjucks, LiquidJS and others "out of the box" without additional plugins and loaders.

The plugin extracts JS and CSS form source files referenced in HTML into output files. Compiled JS and CSS can be inlined into generated HTML using the ìnline plugin option.

@webpack-bot
Copy link
Contributor

For maintainers only:

  • This needs to be documented (issue in webpack/webpack.js.org will be filed when merged)
  • This needs to be backported to webpack 4 (issue will be created when merged)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
PR: unreviewed
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

None yet
2 participants
@webdiscus @webpack-bot