Skip to content
A simple, flexible and fast html webpack plugin support multiple htmls
TypeScript HTML JavaScript
Branch: master
Clone or download
Latest commit 06481d0 May 7, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src Fix shared params May 7, 2019
.gitignore Fix doc Jan 28, 2019
.npmignore Init Jan 28, 2019
.travis.yml Add custom params Jan 31, 2019
Foyfile.ts Add custom params Jan 31, 2019
LICENSE Init Jan 28, 2019
README.md Add entries Mar 5, 2019
package.json
tsconfig.json Fix types Jan 28, 2019
yarn.lock

README.md

htmls-webpack-plugin

Build Status npm npm

Simple, flexible and fast html webpack plugin.

Features

  • Simple and flexisble, you can almost controll anything of generate htmls, no need of setup lots of plugins.
  • Support multiple htmls by default
  • Fast, almost 20x faster then html-webpack-plugin for 20+ pages.

Install

npm i -D htmls-webpack-plugin

Usage

const HtmlsWebpackPlugin = require('htmls-webpack-plugin')

module.exports = {
    plugins: [
        new HtmlsWebpackPlugin({
             // optional, hooks
            beforeEmit: (compilation, compiler) => void,
             // optional, hooks
            afterEmit: (compilation, compiler) => void,
             // optional, default is ejs. custom template rendering function, support async rendering,
            render: (file, params) => string | Promise<string>,
            htmls: [{
                // template path
                src: '',
                // string | ((source, src, params) => string), relative to output path, can be a function to be generated via context
                filename: '',
                // optional, override global render function
                render: (file, params) => string | Promise<string>,
                // optional, override global flushOnDev
                flushOnDev: boolean | string
                // custom params when rendering
                params: () => object | () => Promise<object> | object
                // transformParams, override global transformParams
                transformParams?: (params: Params) => Params & { [k: string]: any }
            }],

             /* boolean | string, flush html files to dist, can be a string file path, useful for debug or devServer. */
            flushOnDev: false,

             /* optional, override webpackConf's publicPath */
            publicPath: function | string',

            // optional, custom params when rendering, could be an async function
            params: () => object | () => Promise<object> | object

            // transformParams
            transformParams?: (params: Params) => Params & { [k: string]: any }
        })
    ]
}

The variables in html templates:

interface Params {
  entries: string[] // all entrypoints
  files: string[] // all files
  jses: string[] // all files ends with .js
  csses: string[] // all files ends with .css
  options: Props // plugin props
  compilation: Compilation // webpack compilation
  [k: string]: any // custom params via options
}

ejs example

<body>
    <% for (let js in entries) {%>
        <script src="<%= js %>"></script>
    <% } %>
</body>

Why not html-webpack-plugin

html-webpack-plugin is really hard to extends and slow for multiple htmls, too much complete features that I don't need. That's why I create this.

License

MIT

You can’t perform that action at this time.