❤
npm
Sign UpSign In

all-chunks-loaded-webpack-plugin
TypeScript icon, indicating that this package has built-in type declarations

0.3.0 • Public • Published

license Build Status npm version dependencies Status devDependencies Status peerDependencies Status npm

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

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

See also

Need a feature?

Welcome to issues!

Dependents (0)

Package Sidebar

Install

npm i all-chunks-loaded-webpack-plugin

Repository

github.com/devpreview/all-chunks-loaded-webpack-plugin

Homepage

github.com/devpreview/all-chunks-loaded-webpack-plugin

Weekly Downloads

1

Version

0.3.0

License

MIT

Unpacked Size

27.6 kB

Total Files

7

Last publish

Collaborators

  • devpreview
Try on RunKit
Report malware