ChunksWebpackPlugin | webpack

The chunks-webpack-plugin creates HTML files with entry points and chunks relations to serve your webpack bundles. It is suitable with multi-page applications that contain multiple entry points.
Since webpack 4, SplitChunksPlugin offers the possibility to optimizes all chunks. It can be particularly powerful, because it means that chunks can be shared even between async and non-async chunks. See the webpack documentation of splitChunks.chunks for details.
splitChunks.chunks option can be set to automatically generate new chunks associated with an entry point. For example, entry points a.js and b.js share common code with the file vendors~a~b.js.
With multiple entry points, it can be difficult to identify relation between the auto-generated chunks and entry points.
chunks-webpack-plugin parses the webpack compilation entry points to get all files associated with the entry points. Then, it generates HTML files which include all assets filtered by an entry point and thechunks-manifest.json file.
It works without configuration. For advanced usage, see the using configuration section.
chunks-webpack-plugin is available on npm as chunks-webpack-plugin and as chunks-webpack-plugin on GitHub.
[!WARNING] Plugin chunks-webpack-plugin@10 is ESM only. [!NOTE] Minimum supported Node.js version is 16.20.0 and Webpack >=5.10.3.
The project includes a minimalist example in the ./example directory. Run the npm run build:example command to execute the Webpack example and see the plugin's implementation in action.
chunks-webpack-plugin will generate two HTML files for each entry point. Each filename contains the entry point name, the {{entry}} placeholder is automatically replaced.
First, let's add the plugin to the webpack configuration.
HTML files are built in the output path directory with the rest of the webpack compilation.
Now you can include the generated HTML files into your HTML page templates. You can do it with e.g. Twig.
You can pass a configuration object to chunks-webpack-plugin to override the default settings.
Default: '[name]-[type].html'
Tells the plugin whether to personalize the filename of the generated files. Files are processed by the webpack compilation and generated in the output path directory. The placeholder [name] is automatically replaced by entry points names and [type] by styles|scripts.
[!NOTE] The filename can contain directories, which will be created automatically.
Tells the plugin whether to personalize the default template for the HTML <style> tags. For example, add additional attributes or a CDN prefix.
Tells the plugin whether to personalize the default template for the HTML <script> tags. For example, add additional attributes or a CDN prefix.
Tells the plugin whether to generate the chunks-manifest.json. The file contains the list of all chunks grouped by entry points. See the chunks-manifest.json example.
Tells the plugin whether to generate the HTML files.
[!WARNING] When set to false, HTML files will not be generated. It can only be useful together with generateChunksManifest option set to true for custom generation of the HTML files.
Example of the webpack configuration with multiple entry points which share common code with the splitChunks option.
The plugin will generate all files in the output path directory:
chunks-webpack-plugin is licensed under the MIT License.
Created with ♥ by @yoriiis.
Copyright OpenJS Foundation and webpack contributors. All rights reserved. The OpenJS Foundation has registered trademarks and uses trademarks. For a list of trademarks of the OpenJS Foundation, please see our Trademark Policy and Trademark List. Trademarks and logos not indicated on the list of OpenJS Foundation trademarks are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them.
The OpenJS Foundation | Terms of Use | Privacy Policy | Bylaws | Code of Conduct | Trademark Policy | Trademark List | Cookie Policy