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

Orchestral

try removing '*' from extensions – Haematothermal

@AntoniSilvestrovič Thanks for the suggestion, but that didn't fix the problem: paste.victor.computer/BkvcgXns8 – Orchestral

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. – Haematothermal

@AntoniSilvestrovič yes, I'm pretty sure. Here's my project if you want to take a look yourself - see package.json. github.com/ccnmtl/mediathread – Orchestral

@Orchestral Is this a React app? – Cacology

@ChristosLytras yes – Orchestral

@Orchestral are you using Dynamic Imports (e.g. const Component = import('some/path')) and/or React Suspense with React.lazy? If you do use any of these, then that is why webpack generates these chunk files. – Cacology

@Orchestral 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? – Lash

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

Teocalli

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

Bursitis