all-chunks-loaded-webpack-plugin
v0.3.0
Published
Provide callback executed after all chunks loaded
Downloads
10
Maintainers
devpreviewReadme
all-chunks-loaded-webpack-plugin for HTML Webpack Plugin
Provide callback executed after all chunks loaded.
Install via npm
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
Usage
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
const HtmlWebpackPlugin = require('html-webpack-plugin')
const AllChunksLoadedWebpackPlugin = require('all-chunks-loaded-webpack-plugin');
module.exports = {
...
plugins: [
new HtmlWebpackPlugin(),
new AllChunksLoadedWebpackPlugin({
callback: "alert('All chunks loaded!');"
}),
...
]
}This will generate a file dist/index.html containing the following:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Webpack App</title>
<script type="text/javascript">
var allChunksLoadedWebpackPluginLoadedFiles = [];
function allChunksLoadedWebpackPlugin(chunk, file) {
var allFiles = ['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>
<link href="app.css" rel="stylesheet" onload="this.onload=null;allChunksLoadedWebpackPlugin('app', 'app.css');">
</head>
<body>
<script src="app.js" onload="this.onload=null;allChunksLoadedWebpackPlugin('app', 'app.js');"></script>
</body>
</html>Options
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: [
new HtmlWebpackPlugin(),
new AllChunksLoadedWebpackPlugin({
callback: '/* Put your callback here */'
}),
...
]
}Credit
- HTML Webpack Plugin - Simplifies creation of HTML files to serve your webpack bundles.
See also
- 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.
Need a feature?
Welcome to issues!