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']
                    }
                }
            }
        ]
    }
};

Answer 1

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").

Answer 2

// 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' },
        ]
      });
   }