- Notifications
You must be signed in to change notification settings - Fork3
Injecting css chunks extracted using extract-css-chunks-webpack-plugin to HTML for html-webpack-plugin
License
teamable-software/css-chunks-html-webpack-plugin
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
Plugin for injecting css chunks, extracted using extract-css-chunks-webpack-plugin, to HTML for html-webpack-plugin
Use in conjunction withextract-css-chunks-webpack-plugin andbabel-plugin-dual-importto inject CSS chunks paths into your HTML file withhtml-webpack-plugin.
The current version is incompatible with Webpack 3 or older. In order to use this plugin with Webpack 3, usecss-chunks-html-webpack-plugin@0.1.0
npm install --save-dev css-chunks-html-webpack-plugin@0.1.0
npm install --save-dev css-chunks-html-webpack-plugin \ mini-css-extract-plugin babel-plugin-dual-import \ html-webpack-plugin
webpack.config.js
constExtractCssPlugin=require('mini-css-extract-plugin');constHtmlWebpackPlugin=require('html-webpack-plugin');constCssChunksHtmlPlugin=require('css-chunks-html-webpack-plugin');module.exports={// your other optionsplugins:[newExtractCssPlugin(),newCssChunksHtmlPlugin({inject:'head'}),newHtmlWebpackPlugin()],};
You can pass an object of configuration options to CssChunkHashPlugin. Allowed values are as follows:
inject:'head'|'body'|falsewhether to inject chunks paths script into HTML, used for manually addingchunks paths using custom template for HtmlWebpackPlugin (defaulttrue)
The CSS chunks paths map is saved inhtmlWebpackPlugin.files.cssHash in your template. So if you want to manually addCSS chunks map you can do (if you are using EJS):
<scripttype="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 withwindow.__CSS_CHUNKS__into<body> setinject: 'body',
There is a basic example of usage inexamples
You're free to contribute to this project by submittingissues and/orpull requests.
This project is licensed underMIT.
About
Injecting css chunks extracted using extract-css-chunks-webpack-plugin to HTML for html-webpack-plugin
Topics
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Packages0
Uh oh!
There was an error while loading.Please reload this page.
Contributors4
Uh oh!
There was an error while loading.Please reload this page.