Plugin for injecting css chunks, extracted using extract-css-chunks-webpack-plugin, to HTML for html-webpack-plugin
Use in conjunction with extract-css-chunks-webpack-plugin and babel-plugin-dual-import to inject CSS chunks paths into your HTML file with html-webpack-plugin.
npm install --save-dev css-chunks-html-webpack-plugin \
extract-css-chunks-webpack-plugin babel-plugin-dual-import \
html-webpack-plugin
webpack.config.js
const ExtractCssChunks = require('extract-css-chunks-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CssChunkHashPlugin = require('../lib');
module.exports = {
// your other options
plugins: [
new ExtractCssChunks(),
new CssChunkHashPlugin({ inject: 'head' }),
new HtmlWebpackPlugin(),
]
};
You can pass an object of configuration options to CssChunkHashPlugin. Allowed values are as follows:
inject
:'head'
|'body'
|false
whether to inject chunks paths script into HTML, used for manually adding chunks paths using custom template for HtmlWebpackPlugin (defaulttrue
)
The CSS chunks paths map is saved in htmlWebpackPlugin.files.cssHash
in your template. So if you want to manually add
CSS chunks map you can do (if you are using EJS):
<script type="text/javascript">
window.__CSS_CHUNKS__ = JSON.parse('<%= JSON.stringify(htmlWebpackPlugin.files.cssHash) %>')
</script>
By default, it will inject script tag into <head>
. If you want to inject the script tag with window.__CSS_CHUNKS__
into <body>
set inject: 'body'
,
There is a basic example of usage in [examples][examples]
You're free to contribute to this project by submitting issues and/or pull requests.
This project is licensed under MIT.