After splitting into chunks, do I need to manually inject those chunk files, or will the main entry bundle automatically load them at runtime?

[ram-139-ar]

const path = require('path');
let BundleAnalyzerPlugin;
module.exports = (env, argv) => {
const isDevelopment = argv.mode === 'development'; // No I18N

if (isDevelopment) {
BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; // No I18N
}

const webComponentsConfig = {
entry: {
'components/wd-render-text': './components/wd-render-text.ts' // No I18N
},
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist'), // No I18N
clean: false,
publicPath: '/ui-lab/dev-releases/web-components/dist/'
},
module: {
rules: [
{
test: /.html$/,
loader: 'html-loader' // No I18N
},
{
test: /.ts$/,
use: {
loader: 'ts-loader', // No I18N
options: {
configFile: path.resolve(__dirname, 'tsconfig.json') // No I18N
}
},
exclude: /node_modules/
}
]
},
resolve: {
extensions: ['.ts', '.js'], // No I18N
alias: {
'web-pack-bundling': path.resolve(__dirname, '../../../web-pack-bundling'), // No I18N
'zd-cui': path.resolve(__dirname, '../../../zd-cui/addon') // No I18N
}
},
mode: argv.mode || 'development', // No I18N
devtool: isDevelopment ? 'eval-source-map' : false, // No I18N
...(isDevelopment && {
optimization: {
usedExports: true, // Enables tree shaking in development
sideEffects: true, // Respect package.json sideEffects
minimize: false, // Don't minify in dev
splitChunks: {
cacheGroups: {
common_web: {
minSize: 1000, // means 1000 bytes
maxSize: 4000, // means 4 KB
minChunks: 2,
reuseExistingChunk: true,
chunks: 'all',
}
}
}
}
}),
...!isDevelopment && {
optimization: {
usedExports: true, // Enables tree shaking in production
sideEffects: true, // Respect package.json sideEffects
minimize: true,
splitChunks: {
cacheGroups: {
common_web: {
minSize: 1000, // means 100 bytes
maxSize: 4000, // means 3 KB
filename: 'common.[contenthash].chunk.js',
minChunks: 2,
reuseExistingChunk: true,
chunks: 'all'
}
}
}
}
},
externals: {
baseContext: 'WdContexts' // No I18N
},
plugins: isDevelopment ? [
new BundleAnalyzerPlugin({
analyzerMode: 'static', // No I18N
openAnalyzer: false, // Automatically opens report in browser
reportFilename: 'web-components-report.html' // No I18N
})
] : []
};

return webComponentsConfig;
};

This is my splitChunks configuration. After building, I have two chunk files in the dist folder. However, when I include the main entry bundle(render-text.js) in the browser, these chunks are not automatically loaded.

Version : webpack: 5.97.1 

[3ru]

I believe with splitChunks: { chunks: 'all' }, the extra file is an “initial” chunk, which isn’t auto-loaded by the entry. In that case, please try using HtmlWebpackPlugin to inject.
Also ensure output.publicPath matches how you load the entry and no errors in DevTools.

[ram-139-ar]

Thank you. i will check

[ram-139-ar]

Currently, I’m manually including the entry bundle in the server JSP. The chunk files are generated at compile time, so I cannot guarantee whether a specific chunk exists. In this scenario, how can I load chunk files if they are present? Is there a way to handle this automatically?

[alexander-akait]

You can use something like - https://github.com/shellscape/webpack-manifest-plugin or write you own plugin and generate manifest files with chunks/assets/entries/etc