How do I disable webpack 4 code splitting?

Question

I'm using webpack 4.43.0.

How do I prevent codesplitting from happening in webpack? All these files are created - 0.bundle.js up to 11.bundle.js (alongside the expected bundle.js), when I run webpack. Here's my webpack config:

/* eslint-env node */

const path = require('path');

module.exports = {
    entry: './media/js/src/main.jsx',
    mode: process.env.WEBPACK_SERVE ? 'development' : 'production',
    output: {
        path: path.resolve(__dirname, 'media/js'),
        filename: 'bundle.js'
    },
    resolve: {
        extensions: ['*', '.js', '.jsx']
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                include: path.resolve(__dirname, 'media/js/src'),
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env', '@babel/preset-react']
                    }
                }
            }
        ]
    }
};

@AntoniSilvestrovič Thanks for the suggestion, but that didn't fix the problem: https://paste.victor.computer/BkvcgXns8 — nnyby, May 27 '20 at 17:17
Are you sure you're not loading some other webpack config? From what I see here it shouldn't do the code splitting. If not, I'd try reinstalling webpack. — Antoni Silvestrovič, May 28 '20 at 13:04
@AntoniSilvestrovič yes, I'm pretty sure. Here's my project if you want to take a look yourself - see package.json. https://github.com/ccnmtl/mediathread — nnyby, May 28 '20 at 17:14
@nnyby are you using [Dynamic Imports](https://webpack.js.org/guides/code-splitting/#dynamic-imports) (e.g. `const Component = import('some/path')`) and/or [React Suspense](https://reactjs.org/docs/concurrent-mode-suspense.html) with [React.lazy](https://reactjs.org/docs/code-splitting.html#reactlazy)? If you do use any of these, then that is why webpack generates these chunk files. — Christos Lytras, May 29 '20 at 20:15
@nnyby webpack bundles your application and sp(l)its out bundles based on default configuration which usually fit best practices. You can tweak it using the SplitChunksPlugin. So, why do you want to force everything into one bundle? — Legends, Jun 03 '20 at 18:05

score 31 · Answer 1 · edited May 29 '20 at 18:49

You can use webpack's LimitChunkCountPlugin to limit the chunk count produced by code splitting:

In your webpack.config.js file:

const webpack = require('webpack');   

module.exports = {
  plugins: [
    new webpack.optimize.LimitChunkCountPlugin({
      maxChunks: 1
    })
  ],
  ...
};

You could also pass the --optimize-max-chunks option to the webpack command directly.

So, in your package.json file:

{
  "scripts": {
    "build": "webpack --optimize-max-chunks 1",
    ...
  },
  ...
}

Now, when you run npm run build, webpack will build only one file (or "chunk").

score 1 · Answer 2 · answered Apr 06 '21 at 20:10

// Full list of options: https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-build
build: {
  scopeHoisting: true,
  vueRouterMode: 'history', // available values: 'hash', 'history'
  showProgress: true,
  gzip: false,
  analyze: false,
  distDir: 'dist',
  productName:'pos_host_ui',
  minify:true,
  
  // Options below are automatically set depending on the env, set them if you want to override
  // extractCSS: false,

  // https://quasar.dev/quasar-cli/cli-documentation/handling-webpack
  extendWebpack (cfg) {
      const webpack = require('webpack');   
      cfg.plugins.push(
            new webpack.optimize.LimitChunkCountPlugin({
              maxChunks: 1
                })
      );
      
      cfg.module.rules.push({
        resourceQuery: /blockType=i18n/,
        type: 'javascript/auto',
        use: [
          { loader: '@kazupon/vue-i18n-loader' },
          { loader: 'yaml-loader' },
        ]
      });
   }

How do I disable webpack 4 code splitting?

2 Answers2