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...
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.
If you use HtmlWebpackPlugin and ExtractTextPlugin or MiniCssExtractPlugin to
<link>to external stylesheet files, add this plugin to convert the links into
The raw HtmlWebpackPlugin can bundle CSS assets as
<link> 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
Note: this is for internalizing
<style>'s only - if you wish to inline
<scripts>'s please take a look at:
- inlining feature of sister plugin script-ext-html-webpack-plugin;
- the HtmlWebpackPlugin inline example based on jade templates.
Install the plugin with npm:
$ npm install style-ext-html-webpack-plugin
Note: you may see warnings of the following type:
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).
Compatibility of v4.x of this plugin (node 6 or higher) - see explanations below the table:
|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;
Use Case: Internalize all your CSS
Add the plugin to your webpack config.
The order is important - the plugin must come after HtmlWebpackPlugin and ExtractTextWebpackPlugin:
module:loaders:test: /\.css$/ loader: ExtractTextPluginplugins:...'styles.css'<< add the plugin
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
Use Case: Internalize critical CSS only
Add the plugin and use more than one loader for your CSS:
module:loaders:test: /critical.css/ loader: ExtractTextPlugintest: /other.css/ loader: 'style-loader!css-loader' << add separate loaderplugins:...'styles.css'
Use Case: Internalize critical CSS with all other CSS in an external file
Use two instances of ExtractTextPlugin and tell StyleExtWebpackPlugin which one to target by giving it the name of the output file:
const internalCSS = 'internal.css';const externalCSS = 'styles.css';return...module:loaders:test: /critical.css/ loader: internalCSStest: /other.css/ loader: externalCSSplugins:...internalCSSexternalCSS'internal.css' << tell the plugin which to target
Use Case: Specifying Position of Style Element
In the above cases, the positioning of the
<style element is controlled by the
inject option specified by html-webpack-plugin.
For more control, you can use an extended, hash version of the configuration. This can have the following properties:
true|false] - for switching the plugin on and off (default:
file: the css filename - previously, the single
undefined- uses the first css file found in the compilation);
chunks: which chunks the plugin scans for the css file - see the next Use Case: Multiple HTML files for usage (default:
undefined- scans all chunks);
plugin] - all (hopefully) self-explanatory except
plugin, which means defer to html-webpack-plugin's
minify: see next section
cssRegExp: A regular expression that indicates the css filename (default: /.css$/);
So to put the CSS at the bottom of the
module:loaders:test: /\.css$/ loader: ExtractTextPluginplugins:...'styles.css'position: 'head-bottom'
Use Case: Minification/Optimisation
The inlined CSS can be minified/optimised using the extended, hash version of the configuration. Use the
minify property with one of the following values:
false: the default, does not minify;
true: minifies with default options;
- a hash of the minification options. Minification is carried out by the clean-css optimizer (thanks, @jakubpawlowicz!). See its documentation for the available options.
plugins:...minify:level:1:all: falsetidySelectors: true
Use Case: Sass/PostCSS Processing etc.
All as per the extract plugin you have chosen.
Use Case: Multiple HTML files
See the discussion below regarding ExtractTextPlugin.
MiniCssExtractPlugin also supports multiple entry points with chunks.
However a configuration to work with StyleExtWebpackPlugin has not yet been tested.
html-webpack-plugin can generate multiple html files if you use multiple instances of the plugin. If you want each html page to be based on different assets (e.g a set of pages) you do this by focussing each html-webpack-plugin instance on a particular entry point via its
chunks configuration option.
style-ext-html-webpack-plugin supports this approach by offering the same
chunks option. As you also need an instance of extract-text-webpack-plugin, the configuration is quite unwieldy:
...const page1Extract = 'page1.css';const page2Extract = 'page2.css';const webpackConfig =...entry:entry1: 'page-1-path/script.js'entry2: 'page-2-path/script.js'outputfilename = '[name].js'moduleloaders:test: /\.css$/loader: page1Extractinclude:'page-1-path'test: /\.css$/loader: page2Extractinclude:'page-2-path'plugins:chunks: 'entry1'filename: 'page1.html'chunks: 'entry2'filename: 'page2.html'page1Extractpage2Extractchunks: 'entry1'chunks: 'entry2'...return webpackConfig;
Phew! A loop is recommended instead.
Use Case: Hot Module Replacement
Hot module replacement should work, but has not been tested.
ExtractTextPlugin does not support HMR. If you really need this for your CSS you have two options:
- revert to/stick with v2.x of this plugin;
- only internalize the CSS on production builds.
The former option is viable if v2.x supports your requirements but that version is no longer maintained hence the second approach is recommended.
For this, use a conditional in your webpack.config to:
- select between ExtractTextPlugin or a loader that supports HMR such as the style-loader;
- either remove the StyleExtPlugin or disable it by passing
falseto its constructor:
const DEBUG = processenvNODE_ENV !== 'production';return...module:loaders:test: /\.css$/loader: DEBUG ? 'style-loader|css-loader' : ExtractTextPluginplugins:...'styles.css'!DEBUG
If you have any problems, check the HTML file outputted by HtmlWebpackPlugin. As long as it has the
showErrors configuration option set (the default), any errors from StyleExt will be displayed there.
Your next step is to simply remove the StyleExtPlugin and check that ExtractTextPlugin works by itself.
If it does and reintroducing StyleExtPlugin still has problems, please raise an issue giving your configuration and, please, DEBUG output. The DEBUG output is generated by the debug tool which is enabled by setting the
DEBUG=StyleExt environmental variable:
The output of a working configuration will look something like:
StyleExt constructor: enabled=true, filename=undefinedStyleExt html-webpack-plugin-alter-asset-tags: CSS file in compilation: 'styles.css'StyleExt html-webpack-plugin-alter-asset-tags: CSS in compilation: @import url;...StyleExt html-webpack-plugin-alter-asset-tags: link element found
- 4.1.3 - updated versions - added end-of-life message to README
- 4.1.1 - more docs and tests for use with MiniCSSExtractPlugin
- 4.1.0 - remove webpack v1.x and webpack v2.x support - updated webpack 4 testing to 4.35.2 - added support for HtmlWebpackPlugin v4.x (thanks @SpyTec)
- 4.0.0 - webpack4 support - removed node 5.x support - node 9.x, 10,x, 11.x testing - support for UglifyJsPlugin in Wepack 1 removed - CSS minification tested using cssnano with postcss-loader
- 3.4.7 - removed legacy dependencies (thanks @ngyikp)
- 3.4.6 - PR 34 - fix case where public path is a URL (thanks @jlwogren, @gvitelli) - updated dependencies
- 3.4.5 - further fix for issue 33 when css filenames include '?'
- 3.4.4 - partial resolution to issue 33 - link element not removed (thanks orenklein)
- 3.4.3 - added node 7 & 8 testing
- 3.4.2 - resolved issue 29 - link to stylsheet not being updated (thanks @ballwood) - updated dependencies - added webpack3 testing
- 3.4.1 - updating dependencies / typos on README
- 3.4.0 - add explicit css file matching (thanks @mastilver for the complete PR), updated dependecies
- 3.3.0 - add minification option (thanks @pablohpsilva for the idea)
- 3.2.0 - runs even if
inject: falsefor html-webpack-plugin; supports explicit positioning of style tags; update dependencies
- 3.1.1 - updated README (sorry @rastasheep)
- 3.1.0 - support multiple entry points (thanks @hagmandan); README typos fixed (thanks @eahlberg); updated all dependencies (including webpack 2.2.0)
- v3.0.8 - webpack2 tests moved to webpack 2.2.0-rc3
- v3.0.7 - webpack2 tests moved to webpack 2.2.0-rc.2 and minor fix to maintain compatability
- v3.0.6 - webpack1 tests moved to webpack 1.14.0
- v3.0.5 - updated README after issue 10 (thanks, @Birowsky)
- v3.0.4 - support
output.publicPathconfiguration and better debugging support
- v3.0.3 - instrument code with debug
- v3.0.2 - include
libfolder in deployment (thanks, @Aweary)
- v3.0.1 - minor REAME and error handling improvements
- v3.0.0 - complete rewrite to piggback off ExtractTextPlugin
- v2.0.5 - modified test to use dynavers with webpack 1.13.2 and 2.1.0-beta.16
- v2.0.4 - fixed jasmine dependency to explicit version v2.4.1 due to bug in v2.5
- v2.0.3 - updated dependency versions, reclassified some dependencies
- v2.0.2 - merged pull request by 7pass fixing 2.0.1 - thanks!
- v2.0.1 - added explicit guard against use of
- v2.0.0 - webpack 1.x and 2.x compatible, including hot reloading
- v2.0.0.beta.3 - warnings about beta testing (!), debug enhancements, and better unescaping
- v2.0.0.beta.2 - Travis timeout and tag spacing fixes
- v2.0.0-beta.1 - node 4.x fix and fixed handling of multiple scripts
- v2.0.0-beta.0 - hot module reload working (with
HtmlWebpackPlugincache switched off)
- v1.1.1 - hot module reload not working with webpack 2
- v1.1.0 - now Webpack 2.x compatible
- v1.0.7 - added warning that not compatible with Webpack 2
- v1.0.6 - updated tests to match changes in script-ext-html-webpack-plugin
- v1.0.5 - updated code to match changes in semistandard
- v1.0.4 - added debug options
- v1.0.3 - documentation update
- v1.0.2 - documentation update
- v1.0.1 - now plays happily with plugins on same event
- v1.0.0 - initial release