Code splitting with webpack with single entry point

Question

I am new to webpack and trying to figure out how to have the code splitting working. I have a large bundle created from react-native-web and I want to split it into two smaller ones. One will include all node_modules and the other one my custom code. Please note that my app has a single entry point and I do not require dynamic import at the moment.

I have tried adding the following into my webpack configuration

optimization: { splitChunks: { chunks: 'all' } }

This created two bundles, however my app is not rendered in the browser. Do I have to somehow reference the second bundle from the first one? Does anyone have a working example?

Answer 1

I have found the solution!

I had to add chunkFilename with the newly created chunk name as follows:

output: {
      filename: '[name].bundle.js',
      chunkFilename: '[name].bundle.js',
      path: path.resolve(__dirname, 'dist')
   },