What am I doing wrong in order to remove unnecessary exports with webpack 5?

Question

JavaScript

I have one module like a library, that is, it has a set of functions, objects, and a couple of constants. Everything in it is exported. There is a "final" file in which only some objects and functions from the first "library" module are imported.

The "destination" file is also specified in the webpack config as an entry point. After building with webpack, I see in the bundle not only what is imported, but also everything else that was in the "library" module.

I tried to specify in the webpack config -

optimization: {
   usedExports: true,
 },

then in package.json - , and I understand that both methods should solve my problem. But individually, they do nothing at all in my case. And only if they are specified together, then webpack at least designated unused modules as such, but did not remove them. And the production mode did not bother him. Does webpack 5 remove unused exports on its own, or does it require additional plugins? Additional info: I have mode: 'production' in my webpack config. I don't use Babel, I just have ES6 modules. Now I tested the option with usedExports: true in development mode, yet the webpack indicates unused harmony exports now and in the absence of the sideEffects: false line. "sideEffects": false

Answer 1

Found out what was the issue. I tested the assembly on a special semi-empty project, on small modules, literally from a couple of functions / objects, trying to repeat the same mistake. It was in my code, not in the assembly. I had an object that contains references to DOM elements. And obviously webpack takes this as a "side effect" module and doesn't shake it out. As a result, I singled out this particular module in a separate file, solving the issue in this way. The rest of the modules seem to be shaking out normally.