\
**Category:** Uncategorized\
**Created:** [November 3, 2021, 2:19pm UTC](https://discourse.aurelia.io/t/au1-webpack-5-adding-all-chunks-to-index-html/4466 "2021-11-03T14:19:30Z")\
**Posts on this page:** 4\
**Page:** 1
**Author:**  [@BrianPAdams](https://discourse.aurelia.io/u/BrianPAdams)\
**Post date:** [November 3, 2021, 2:19pm UTC](https://discourse.aurelia.io/t/au1-webpack-5-adding-all-chunks-to-index-html/4466/1 "2021-11-03T14:19:30Z")
We are using Aurelia 1 and Webpack 5. We upgraded from Webpack 4. We noticed that our index.html file now includes a script tag for every single javascript file produced by the splitChunks plugin. This is about 150 javascript files. At some point in the past only a single js file was included and everything was lazy loaded when it was needed. However, now it’s just adding everything. I’m not sure when this happened, however, I believe it was when we upgraded to Webpack 5.
Our relevant webpack.config.js settings are:
```
entry: {
app: ['aurelia-bootstrapper']
},
optimization: {
runtimeChunk: true, // separates the runtime chunk, required for long term cacheability
minimize: production,
minimizer: [
new TerserPlugin({
//cache: true,
parallel: true,
terserOptions: {
//ecma: platform === 'es6' ? 2015 : 5
ecma: 2018
}
}),
new CssMinimizerPlugin()
],
splitChunks: {
chunks: 'all',
minSize: 20000,
maxSize: 500000,
minRemainingSize: 0,
minChunks: 1,
maxAsyncRequests: 30,
maxInitialRequests: 30,
}
},
new HtmlWebpackPlugin({
template: 'index.ejs',
minify: production ? {
removeComments: true,
collapseWhitespace: true,
collapseInlineTagWhitespace: true,
collapseBooleanAttributes: true,
removeAttributeQuotes: false,
minifyCSS: true,
minifyJS: true,
removeScriptTypeAttributes: false,
removeStyleLinkTypeAttributes: true,
ignoreCustomFragments: [/\${.*?}/g]
} : undefined,
chunksSortMode: 'none',
}),
```
---
**Author:**  [@elitastic](https://discourse.aurelia.io/u/elitastic)\
**Post date:** [November 5, 2021, 1:27pm UTC](https://discourse.aurelia.io/t/au1-webpack-5-adding-all-chunks-to-index-html/4466/2 "2021-11-05T13:27:41Z")
Just a wild guess, what if you change your config from `chunks: 'all'` to `chunks: 'async'`?
---
**Author:**  [@BrianPAdams](https://discourse.aurelia.io/u/BrianPAdams)\
**Post date:** [November 22, 2021, 5:19pm UTC](https://discourse.aurelia.io/t/au1-webpack-5-adding-all-chunks-to-index-html/4466/3 "2021-11-22T17:19:01Z")
It ended up being related to removing the chunk name from calls to PLATFORM.moduleName(). This brings up the question of how will lazy loading in v2 be handled? v2 doesn’t have a PAL to help with this. Will lazy loading be handled in webpack.config.js only?
---
**Author:**  [@elitastic](https://discourse.aurelia.io/u/elitastic)\
**Post date:** [November 23, 2021, 7:16am UTC](https://discourse.aurelia.io/t/au1-webpack-5-adding-all-chunks-to-index-html/4466/4 "2021-11-23T07:16:49Z")
This can be done by the “magic comments” feature of webpack:
> **[Module Methods | webpack](https://webpack.js.org/api/module-methods/)**
>
> webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.
```auto
import { route } from '@aurelia/router';
@route({
routes: [
{
path: ['products'],
component: () => import(/* webpackChunkName: "products-lazy" */ './components/products'),
title: 'Lazy entry point for products section',
}
]
})
export class Products
{
}
```