Bundle splitting with Webpack 4 - duplicate vendor bundle - reactjs

Question

We have a legacy multipage application where each page has its own js file. We use Webpack 4 and now we start to use react as well. I want to separate react bundle from our own code. So each page loads its own legacy pageXJS.js file, the new pageXReact.js file, and the react.bundle.js
We have a webpack config below that works almost fine.
const path = require('path');
const webpack = require('webpack');
const jsModuleFolder = './src/main/resources/static/js/module/';
module.exports = {
mode: 'development',
devtool: 'inline-source-map',
entry: {
'pageA/pageAJS': jsModuleFolder + 'pageA/pageAJS.js',
'pageB/pageBJS': jsModuleFolder + 'pageB/pageBJS.js',
'pageC/pageCJS': jsModuleFolder + 'pageC/pageCJS.js',
'pageC/PageCReact': jsModuleFolder + 'pageC/pageCReact.js',
vendor: ['react', 'react-dom']
},
output: {
filename: '[name].bundle.js',
path: path.join(__dirname, jsModuleFolder )
},
optimization: {
splitChunks: {
chunks: 'all',
cacheGroups: {
vendor: {
chunks: 'initial',
test: 'vendor',
name: '../react/react',
enforce: true
}
},
},
},
};
It generates the react.bundle.js in the react folder. However, it also generates a vendor.bundle.js file in the module folder. The vendor.bundle.js is just a webpackBoostrap file without real content. The webpackBootstrap is also part of the generated PageCReact.bundle.js so the vendor.bundle.js seems to be unnecessary. (And my site works fine without it.)
How can I prevent this file from being generated as well?

Answer 1

It's the runtime file and is needed by webpack.
You can include the file in your entry point file like this:
optimization: {
runtimeChunk: false // <-- set to false
I would suggest to configure it like this:
optimization: {
runtimeChunk: 'single', // creates a single runtime chunk for all entry points.