Repository files navigation

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.

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

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

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

yarn add chunks-webpack-plugin --dev

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.

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

importChunksWebpackPluginfrom'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>

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

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'});

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}" />`})]};

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>`})]};

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})]};

Type:

typegenerateChunksFiles=boolean;

Default:true

Tells the plugin whether to generate the HTML files.

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

importChunksWebpackPluginfrom'chunks-webpack-plugin';importpathfrom'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>

chunks-webpack-plugin is licensed under theMIT License.

Created with ♥ by@yoriiis.