Inline Chunks Webpack Plugin
webpack v4 support
This is a webpack plugin that inline your chunks that is written as link or script using HtmlWebpackPlugin.
It both can be use to inline manifest & css within link or script tag to save a http request.
It also can inline any other chunks.
This plugin requires HtmlWebpackPlugin v2.10.0 and above.
Installation
Install the plugin with npm:
npm install inline-chunks-html-webpack-plugin --save-dev
Configuration
inlineChunks
: An array of names of chunk to inline.chunk[.ext]
:.ext
is optional to distinguish chunk of the same name from the file extension.
deleteFile
: delete file from asset default tofalse
.
//webpack.configconst InlineChunksWebpackPlugin = ;moduleexports = //..... //..... plugins: //... //... inlineChunks: 'manifest' deleteFile: true // do not build chunks //... //..... //.....
Example Usage
Webpack's runtime changes with every build. For effective long-term caching, we separate the runtime code in manifest.js. This manifest.js is very small and increases our startup time as it is a separate http request. Inlining the generated manifest.js in the index.html is a solution.
Extract css bundle and split webpack runtime to manifest then inline it.
// for explicit vendor chunk config entry: app: './main.js' vendor: 'react''redux' output: path: path filename: "[name].[chunkhash].js" chunkFilename: "[chunkhash].js" plugins: name: 'vendor' name: 'manifest' chunks: 'vendor' // extract css into its own file '[name].[contenthash].css' // your options // inlined app.css to the head and manifest.js to the body inlineChunks: 'manifest' 'app.css' deleteFile: true
License
This project is licensed under MIT.