html-extend-webpack-plugin
Extended from html-webpack-plugin, support stylesheet and script file inline to html and tag add attributes
Installation
npm install --save-dev html-extend-webpack-plugin
Extended from html-webpack-plugin Configuration
You can pass a hash of configuration options to HtmlWebpackPlugin
.
Allowed values are as follows:
title
: The title to use for the generated HTML document.filename
: The file to write the HTML to. Defaults toindex.html
. You can specify a subdirectory here too (eg:assets/admin.html
).template
: Webpack require path to the template. Please see the docs for details.inject
:true | 'head' | 'body' | false
Inject all assets into the giventemplate
ortemplateContent
- When passingtrue
or'body'
all javascript resources will be placed at the bottom of the body element.'head'
will place the scripts in the head element.favicon
: Adds the given favicon path to the output html.minify
:{...} | false
Pass a html-minifier options object to minify the output.hash
:true | false
iftrue
then append a unique webpack compilation hash to all included scripts and CSS files. This is useful for cache busting.cache
:true | false
iftrue
(default) try to emit the file only if it was changed.showErrors
:true | false
iftrue
(default) errors details will be written into the html page.chunks
: Allows you to add only some chunks (e.g. only the unit-test chunk)chunksExtend
:object
extend chunks, support inline stylesheet and script, can add external attributeschunksSortMode
: Allows to control how chunks should be sorted before they are included to the html. Allowed values: 'none' | 'auto' | 'dependency' | {function} - default: 'auto'excludeChunks
: Allows you to skip some chunks (e.g. don't add the unit-test chunk)xhtml
:true | false
Iftrue
render thelink
tags as self-closing, XHTML compliant. Default isfalse
Here's an example webpack config illustrating how to use these options:
const CommonsChunkPlugin = ;const HtmlExtendWebpackPlugin = ; moduleexports = plugins: name: 'common' filename: 'static/js/common.js' minChunks: 2 inject: true template: './src/jzwd/ksmap01/ksmap01.html' chunks: 'common' 'ksmap01' chunksExtend: ksmap01: stylesheet: inline: true attrs: id: 'miniStyle' script: inline: true attrs: id: 'miniScript' filename: 'ksmap01.html' 'static/css/[name].css'
You can also add stylesheet placehodler and javascript placehoder to your template as follows:
CSS_PLACEHOLDER 时间段: - JS_PLACEHOLDER
The result after compile it:
时间段: -
The inline stylesheet priority: CSS_PLACEHOLDER > </head>
> no </head>
The inline script priority: JS_PLACEHOLDER > </body>
> no </body>