Thechunks-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 ofsplitChunks.chunks for details.

splitChunks.chunks option can be set to automatically generate new chunks associated with an entry point. For example, entry pointsa.js andb.js share common code with the filevendors~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.

Zero configuration

It works without configuration. For advanced usage, see theusing configuration section.

Installation

chunks-webpack-plugin is available on npm aschunks-webpack-plugin and aschunks-webpack-plugin on GitHub.

npminstall chunks-webpack-plugin --save-dev

yarnadd chunks-webpack-plugin --dev

[!WARNING]Pluginchunks-webpack-plugin@10 is ESM only.[!NOTE]Minimum supportedNode.js version is16.20.0 and Webpack>=5.10.3.

Example

The project includes a minimalist example in the./example directory. Run thenpm run build:example command to execute the Webpack example and see the plugin's implementation in action.

Basic usage

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.

• {{entry}}-styles.html: contains all HTML<link> tags
• {{entry}}-scripts.html: contains all HTML<script> tags

First, let's add the plugin to the webpack configuration.

webpack.config.js

import ChunksWebpackPluginfrom'chunks-webpack-plugin';exportdefault{  plugins:[newChunksWebpackPlugin()]};

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.

main-styles.html

<linkrel="stylesheet"href="main.css"/>

main-scripts.html

<scriptdefersrc="main.js"></script>

Using a configuration

You can pass a configuration object tochunks-webpack-plugin to override the default settings.

filename

Type:

typefilename=string;

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] bystyles|scripts.

newChunksWebpackPlugin({  filename:'templates/[name]-[type].html'});

[!NOTE]Thefilename can contain directories, which will be created automatically.

templateStyle

Type:

typetemplateStyle=(name:string, entryName:string)=>string;

Default:

(name)=>`<link rel="stylesheet" href="${name}" />`;

Tells the plugin whether to personalize the default template for the HTML<style> tags. For example, add additional attributes or a CDN prefix.

exportdefault{  plugins:[newChunksWebpackPlugin({templateStyle:(name)=>`<link rel="stylesheet" href="https://cdn.domain.com${name}" />`})]};

templateScript

Type:

typetemplateScript=(name:string, entryName:string)=>string;

Default:

(name)=>`<script defer src="${name}"></script>`;

Tells the plugin whether to personalize the default template for the HTML<script> tags. For example, add additional attributes or a CDN prefix.

exportdefault{  plugins:[newChunksWebpackPlugin({templateScript:(name)=>`<script defer src="https://cdn.domain.com${name}"></script>`})]};

generateChunksManifest

Type:

typegenerateChunksManifest=boolean;

Default:false

Tells the plugin whether to generate thechunks-manifest.json. The file contains the list of all chunks grouped by entry points. See thechunks-manifest.json example.

exportdefault{  plugins:[newChunksWebpackPlugin({      generateChunksManifest:true})]};

generateChunksFiles

Type:

typegenerateChunksFiles=boolean;

Default:true

Tells the plugin whether to generate the HTML files.

exportdefault{  plugins:[newChunksWebpackPlugin({      generateChunksFiles:false})]};

[!WARNING]When set tofalse, HTML files will not be generated. It canonly be useful together withgenerateChunksManifest option set totrue for custom generation of the HTML files.

import ChunksWebpackPluginfrom'chunks-webpack-plugin';import pathfrom'node:path';const __filename=fileURLToPath(import.meta.url);const __dirname= path.dirname(__filename);exportdefault{  entry:{    home:'home.js',    news:'news.js'},  output:{    filename:'bundle.js',    path: path.resolve(__dirname,'./dist')},  plugins:[newChunksWebpackPlugin()],  optimization:{    splitChunks:{      chunks:'all'}}};

<linkrel="stylesheet"href="vendors~home~news.css"/><linkrel="stylesheet"href="home.css"/>

<scriptdefersrc="vendors~home~news.js"></script><scriptdefersrc="home.js"></script>

<linkrel="stylesheet"href="vendors~home~news.css"/><linkrel="stylesheet"href="news.css"/>

<scriptdefersrc="vendors~home~news.js"></script><scriptdefersrc="news.js"></script>

License

chunks-webpack-plugin is licensed under theMIT License.

Created with ♥ by@yoriiis.

2 Contributors