Webpack Code Splitting Changes Entry Point?

I have been optimizing front-end code and page load speeds on an app. I have run into some issues after I began doing code splitting in Webpack.

After I included the following line in the config, the styles and scripts had stopped loading

optimization: {
    minimize: IS_PRODUCTION,
    splitChunks: {
    chunks: 'all',
    },
},

When I do not chunk the code, the chunks look like this

enter image description here

After I chunk the code, the chunks are as follows

enter image description here

That is, it appears to me that somehow 789.js takes place of index.js. However, in the template, I am including the file as

<script src="{% static 'index.js' %}" type="text/javascript" defer></script>

My question is why this happens, and what should be done to fix it? Chunking seems profitable here since there are three instances of jQuery and probably other things.