remove added code by webpack 4 from bundle.js

Question

I'm using Webpack 4, but the generated js output has some additional code like this:

I want webpack to only bundle the js files I give in it's entry and not to add all this code, after some researches I found a solution here: webpack - remove "webpackBootstrap" code, which says to use this:

optimization: {
    runtimeChunk: true,
}

But this will only generate two files one that contains the webpackBootstrap code, and the other one contains my js files bundled, so this doesn't really solve anything, the both files are injected into my html, since I'm using HtmlWebpackPlugin.

The other proposed solution I found is to use webpack-merge-and-include-globally, but this won't work in my case since I'm using some plugins that are not supported by it.

Isn't really there any solution ?

Thanks in advance,

Answer 1

The easiest way to remove this code is to not use Webpack. That said, you should use Webpack if your application depends on modules and you plan on supporting browsers that do not have ES module support.

When your application is loaded in the browser, Webpack's runtime will declare the various functions that you'd like to remove in an IIFE that takes the modules argument that you can see in your screenshot.

The __webpack_require__ function that's front and center in your screenshot is what Webpack uses to expose your submodules to the code that depends on them.

If you scroll all the way to the bottom of that bundle, you'll see that your code has been stringified and passed into eval calls, all within a data structure (could be an array or object depending on what version you're using) that Webpack will iterate over and inject its dependencies into in order to expose your entry point's dependencies.

Removing all of that generated code will result in your original source code, which probably does not work in most browsers on its own.

You should keep that code and take some time to familiarize yourself with what Webpack has generated. Stepping through it, especially the __webpack_require__ function, will demystify Webpack's role in bundling and help you understand why that's all there.