CODEWITHSUNDEEP
reactjswebpack
심시은
심시은

Reputation: 437

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

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?

Upvotes: 24

Views: 26215

Answers (2)

Juan Marco
Juan Marco

Reputation: 3241

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

Upvotes: 7

satheesh m
satheesh m

Reputation: 451

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

Try if this works. Install this manually LimitChunkCountPlugin

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

Upvotes: 22

Related Questions