How can I disable chunk(code splitting) with webpack4?

Question

I created react project with : yarn create react-app. I'm using webpack 4.29.6, react 16.8.6.

I want to disable code splitting because I want just one 'main.js' file in build/static/js folder. (I already removed hash from their names.)

I tried:

new webpack.optimize.LimitChunkCountPlugin({
    maxChunks: 1
  }),

and

      splitChunks: {
        chunks: 'all',
        name: false,
        cacheGroups: {
          default:false
        }
      }

but these solutions give me these files:

build
  /static
   /js
   -2.chunk.js
   -2.chunk.js.map
   -main.chunk.js
   -main.chunk.js.map
   -runtime~main.js
   -runtime~main.js.map

I think runtime~main.js file and .map file are just okay, but I want the exact 'main.js' file without chunk, without 2.chunk.js. How can I disable default code splitting of webpack 4?

@Kishore Barik Yes but I’m not sure that this is desirable solution. I just deleted all options related to chunk. — 심시은, Nov 23 '19 at 11:21
Is it just as simple as having 1 input and 1 output file? https://webpack.js.org/guides/code-splitting/ — putvande, Feb 20 '20 at 19:02

score 12 · Answer 1 · edited Feb 20 '20 at 18:45

12

plugins: [
    new webpack.optimize.LimitChunkCountPlugin({
        maxChunks: 1
    })
]

Try if this works. Install this manually LimitChunkCountPlugin

https://webpack.js.org/plugins/limit-chunk-count-plugin/

edited Feb 20 '20 at 18:45

MartenCatcher

2,713
8
26
39

answered Feb 20 '20 at 17:43

satheesh m

336
4
5

score 7 · Accepted Answer · answered Feb 20 '20 at 20:42

If you created your project with create-react-app and haven't yet ejected, it appears you have two options currently available:

Option 1 - Create a custom build script

First, install the package rewire as a dependency:

npm install rewire

Create a scripts folder, inside create a new file and give it a name e.g., build-non-split.js, then add:

const rewire = require('rewire');
const defaults = rewire('react-scripts/scripts/build.js');
let config = defaults.__get__('config');

config.optimization.splitChunks = {
    cacheGroups: {
        default: false,
    },
};

config.optimization.runtimeChunk = false;

Modify package.json, inside "scripts" and replace build with:

"build": "node ./scripts/build-non-split.js",

Finally, run npm run build or yarn build

Option 2 - Install the package react-app-rewire-disable-chunks

Note: If you go with this option, don't forget to replace the build script with react-app-rewired. Like this:

"build": "react-app-rewired build",

Source: Disabling code splitting in CRA2 #5306

How can I disable chunk(code splitting) with webpack4?

2 Answers2

Linked