0

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

enter image description here

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,

Renaud is Not Bill Gates
  • 1,684
  • 34
  • 105
  • 191
  • This is webpack runtime code. This is the code the responsible for importing your .js chunks and load your .js modules from them. If you don't intend to include it in the bundles how do you plan things to work? :) btw in production this code is minified and really small. – Raz Ronen Oct 03 '20 at 10:06
  • The problem is that it's rarely when we use JS code for our html pages, or sometimes it's just 5 lines of JS code, so it would be really useless to have all that code added by webpack, and we are an integration team, so when we add a JS code we have to deliver it uglified to the developers. Before, we were using gulp to do all the sass, the post-css, and css loading, as well as transpiling JS using babel, but I thought about migrating to webpack, so it seems this was a bad idea for these kind of projects. – Renaud is Not Bill Gates Oct 05 '20 at 14:22

1 Answers1

0

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.

Mike
  • 3
  • 3
  • The problem is that it's rarely when we use JS code for our html pages, or sometimes it's just 5 lines of JS code, so it would be really useless to have all that code added by webpack, and we are an integration team, so when we add a JS code we have to deliver it uglified to the developers. Before, we were using gulp to do all the sass, the post-css, and css loading, as well as transpiling JS using babel, but I thought about migrating to webpack, so it seems this was a bad idea for these kind of projects, and I don't know if there is some powerful tool like webpack there except gulp or grunt. – Renaud is Not Bill Gates Oct 05 '20 at 14:23
  • Yeah Webpack doesn't seem like it'd be the right solution for your problem. Gulp is still a fantastic tool for serving static sites. – Mike Oct 06 '20 at 03:42