Enhances html-webpack-plugin functionality by enabling inline styles.
npm install style-ext-html-webpack-plugin   

tl;dr
This project is no longer maintained. It does not support Webpack 5.
A bit more detail
Any look at the project activity will show that I have not been able to maintain this project adequately.
The advent of version 5 of Webpack requires another bout of refactoring that I simply have no time for.
Consequently v4.1.3 will be the last version of this plugin.
My thanks to all users, and especially to all contributors, of this plugin over the years.
My apologies to all those whose webpack 5 migration has been made more complicated by this decision.
But I still want to use the plugin...
Feel free!
My last update works with versions of v4.x of webpack and v4.x of html-webpack-plugin.
Forkers feel free! That's what the licence is for.
In fact, if you fork with an intention to support on-going development, let me know!
I'll happily link to your repository here and offer some tips (main one: ditch backward compatibility - it's a pain).
I will formally archive this repository at the end of the 2020.
to external stylesheet files, add this plugin to convert the links into elements.This is an extension plugin for the Webpack plugin HtmlWebpackPlugin - a plugin that simplifies the creation of HTML files to serve your webpack bundles.
The raw HtmlWebpackPlugin can bundle CSS assets as elements if used in conjunction with ExtractTextPlugin or MiniCSSExtractPlugin.
This extension plugin builds on this by moving the CSS content generated by the extract plugins from an external CSS file to an internal element.
Note: this is for internalizing 's only - if you wish to inline 's please take a look at:
- inlining feature of sister plugin
script-ext-html-webpack-plugin;
- the HtmlWebpackPlugin inline example based on jade templates.
shell
$ npm install style-ext-html-webpack-plugin
`Note: you may see warnings of the following type:
`shell
npm WARN html-webpack-plugin@XXX requires a peer of webpack@* but none was installed.
`
This is fine - for testing, we dynamically download multiple version of webpack and its plugins (via the dynavers module).
Version Compatibility
Compatibility of v4.x of this plugin (node 6 or higher) - see explanations below the table:| Webpack | HtmlWebpackPlugin | ExtractTextPlugin | MiniCssExtractPlugin | Functionality
|--- | --- | --- | --- | --- |
| v3.x | v3.x | v3.x | - | no HMR |
| v4.x | v3.x | v4.x | - | no HMR |
| v4.x | v3.x | - | 0.7.x | no tested HMR, no tested multi-entry |
| v4.x | v4.x | - | 0.7.x | no tested HMR, no tested multi-entry, no template styles |
* 'no HMR': hot module replacement not supported - see Use Case: Hot Module Replacement below;
* 'no tested HMR': hot module replacement theoretically supported but not tested;
* 'no tested multi-entry': see Use Case: Multiple HTML files below;
* 'no template styles': loses any inline styles of your HtmlWebpackPlugin template;
Basic Usage
$3
Add the plugin to your webpack config.The order is important - the plugin must come after HtmlWebpackPlugin and ExtractTextWebpackPlugin:
`javascript
module: {
loaders: [
{ test: /\.css$/, loader: ExtractTextPlugin.extract(...)}
]
}
plugins: [
new HtmlWebpackPlugin({...}),
new ExtractTextWebpackPlugin('styles.css'),
new StyleExtHtmlWebpackPlugin() << add the plugin
]
`
That's it.Note that for this simple configuration, HtmlWebpackPlugin's inject option must not be
false. However, this constraint does not apply if you specify the position - see 'Use Case: Specifying Position of Style Element' below
$3
Add the plugin and use more than one loader for your CSS:
`javascript
module: {
loaders: [
{ test: /critical.css/, loader: ExtractTextPlugin.extract(...)},
{ test: /other.css/, loader: 'style-loader!css-loader'}, << add separate loader
]
}
plugins: [
new HtmlWebpackPlugin({...}),
new ExtractTextWebpackPlugin('styles.css'),
new StyleExtHtmlWebpackPlugin()
]
`$3
Use two instances of ExtractTextPlugin and tell StyleExtWebpackPlugin which one to target by giving it the name of the output file:
`javascript
const internalCSS = new ExtractTextPlugin('internal.css');
const externalCSS = new ExtractTextPlugin('styles.css');
return {
...
module: {
loaders: [
{ test: /critical.css/, loader: internalCSS.extract(...)},
{ test: /other.css/, loader: externalCSS.extract(...)},
]
}
plugins: [
new HtmlWebpackPlugin({...}),
internalCSS,
externalCSS,
new StyleExtHtmlWebpackPlugin('internal.css') << tell the plugin which to target
]
}
`$3
In the above cases, the positioning of the