Html-webpack-assets NPM

  npm i --save-dev html-webpack-assets

  yarn add --dev html-webpack-assets

This is a webpack plugin that manage chunks in head and body tags of HTML files using HtmlWebpackPlugin to serve your webpack bundles.

If you want inject chunks in the html document using HtmlWebpackPlugin, somethime you need to inject some chunks in head or body, you just need put chunks to entry in webpack.config.js with key head or body.

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackAssets = require('html-webpack-assets');

module.exports = {
  entry: {
    head: "./src/head.css", // Add to head tag
    body: "./src/body.js" // Add to body tag
  },
  output: {
    path: "./dist",
    filename: "[name].bundle.js"
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/index.ejs",
      chunks: ["head", "body"]
    }),
    new HtmlWebpackAssets()
  ]
}

This will generate a file dist/index.html containing the following

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Test</title>
    <script type="text/javascript" src="head.bundle.js"></script>
  </head>
  <body>
    <script src="body.bundle.js"></script>
  </body>
</html>

html-webpack-assets html-webpack-assets-plugin html-webpack-plugin html webpack

@everything-registry/sub-chunk-1868 @infinitebrahmanuniverse/nolb-html-w

1.0.2

5 years ago

1.0.1

5 years ago

1.0.0

5 years ago