Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

all-chunks-loaded-webpack-plugin

Package Overview
Dependencies
Maintainers
1
Versions
6
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

all-chunks-loaded-webpack-plugin

Provide callback executed after all chunks loaded

  • 0.3.0
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
1
decreased by-50%
Maintainers
1
Weekly downloads
 
Created
Source

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:

NameTypeDefaultDescription
callback{String}undefinedYour callback called after all chunks loaded
errorCallback{String}undefinedYour callback called if some chunk has loading error
chunks{String[]}undefinedAllows you to callback called only some chunks loaded
excludeChunks{String[]}undefinedAllows 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!

Keywords

FAQs

Package last updated on 01 Jun 2018

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc