Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?

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
@alejofernandez

This comment has been minimized.

Copy link

@alejofernandez alejofernandez commented May 8, 2017

👏 👏 👏
+💯

@Yugloocamai

This comment has been minimized.

Copy link

@Yugloocamai Yugloocamai commented Jun 19, 2017

This feels pretty hacky to me.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment