all-chunks-loaded-webpack-plugin for HTML Webpack Plugin
Provide callback executed after all chunks loaded.
npm install --save-dev all-chunks-loaded-webpack-plugin
- Latest release: https://github.com/devpreview/all-chunks-loaded-webpack-plugin/releases
- NPM: https://www.npmjs.com/package/all-chunks-loaded-webpack-plugin
The plugin will update all your webpack chunks with attribute onload contains onload callback. Just add the plugin to your webpack config as follows:
webpack.config.js
constHtmlWebpackPlugin=require('html-webpack-plugin')constAllChunksLoadedWebpackPlugin=require('all-chunks-loaded-webpack-plugin');module.exports={
...
plugins: [newHtmlWebpackPlugin(),newAllChunksLoadedWebpackPlugin({callback: "alert('All chunks loaded!');"}),
...
]}This will generate a file dist/index.html containing the following:
<!DOCTYPE html><html><head><metacharset="UTF-8"><title>Webpack App</title><scripttype="text/javascript">varallChunksLoadedWebpackPluginLoadedFiles=[];functionallChunksLoadedWebpackPlugin(chunk,file){varallFiles=['app.css','app.js'];if(allChunksLoadedWebpackPluginLoadedFiles.indexOf(file)===-1){allChunksLoadedWebpackPluginLoadedFiles.push(file);if(allChunksLoadedWebpackPluginLoadedFiles.length===allFiles.length){setTimeout(function(){alert('All chunks loaded!');},0);}}}</script><linkhref="app.css" rel="stylesheet" onload="this.onload=null;allChunksLoadedWebpackPlugin('app', 'app.css');"></head><body><scriptsrc="app.js" onload="this.onload=null;allChunksLoadedWebpackPlugin('app', 'app.js');"></script></body></html>You can pass a hash of configuration options to all-chunks-loaded-webpack-plugin. Allowed values are as follows:
| Name | Type | Default | Description |
|---|---|---|---|
callback | {String} | undefined | Your callback called after all chunks loaded |
errorCallback | {String} | undefined | Your callback called if some chunk has loading error |
chunks | {String[]} | undefined | Allows you to callback called only some chunks loaded |
excludeChunks | {String[]} | undefined | Allows you to skip callback called some chunks loaded |
Here's an example webpack config illustrating how to use these options:
webpack.config.js
module.exports={
...
plugins: [newHtmlWebpackPlugin(),newAllChunksLoadedWebpackPlugin({callback: '/* Put your callback here */'}),
...
]}- HTML Webpack Plugin - Simplifies creation of HTML files to serve your webpack bundles.
- async-stylesheet-webpack-plugin - Loading stylesheets asynchronously;
- Script Extension for HTML Webpack Plugin - Enhances html-webpack-plugin functionality with different deployment options for your scripts including 'async', 'preload', 'prefetch', 'defer', 'module', custom attributes, and inlining;
- preload-webpack-plugin - A webpack plugin for injecting into HtmlWebpackPlugin pages, with async chunk support.
Welcome to issues!