Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save mckabue/5e01b16233af6edc5d16d113ee777489 to your computer and use it in GitHub Desktop.
Save mckabue/5e01b16233af6edc5d16d113ee777489 to your computer and use it in GitHub Desktop.

How to turn off Webpack code-splitting

Using Webpack import()

The following code will produce code-splitting in Webpack, which means that the source code will be split into several files that will be loaded async at runtime.. More info here;

import('./some-module').then((SomeModule) => {});

The problem

My application required to have two bundles:

  • one file bundle
  • async loading bundle

The problem is that Webpack does not have an option to turn off code-splitting.

Note: Using webpack: 2.5.0.

The solution

The first option was to try the following:

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

By using maxChunks: 0, the code-splitting was not affected. However, when using maxChunks: 1, code-splitting was turned off but a runtime error appears __webpack_require__.e is not a function.

Note: This workaround was proposed at Option to disable code splitting completely

After researching a little bit about Babel's plugins.

module: {
  rules: [{
    test: /\.js$/,
    include: [
      path.resolve(__dirname, 'src')
    ],
    use: [{
      loader: 'babel-loader',
      options: {
        plugins: [
          'dynamic-import-webpack',
          'remove-webpack'
        ]
      }
    }]
  }
}

This approach is using two Babel's plugins dynamic-import-webpack and remove-webpack. So, how it works?:

  1. The first plugin transpiles import() to require.ensure
  2. The second plugin removes require.ensure from the code
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment