ChunksWebpackPlugin

!GitHub Workflow Status (branch)  

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.

Zero configuration

It works without configuration. For advanced usage, see the using configuration section.

Installation

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

``bash
npm install chunks-webpack-plugin --save-dev
`

`bash
yarn add chunks-webpack-plugin --dev
`

> [!WARNING]
> Plugin chunks-webpack-plugin@10 is ESM only.
> [!NOTE]
> Minimum supported Node.js version is 16.20.0 and Webpack >=5.10.3.

Example

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.

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 tags
- {{entry}}-scripts.html: contains all HTML
`

---

Using a configuration

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

$3

Type:

`ts
type filename = 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] by styles|scripts.

`js
new ChunksWebpackPlugin({
filename: 'templates/[name]-[type].html'
});
`

> [!NOTE]
> The filename can contain directories, which will be created automatically.

$3

Type:

`ts
type templateStyle = (name: string, entryName: string) => string;
`

Default:

`js
(name) => ;
`

Tells the plugin whether to personalize the default template for the HTML