Lodash not TreeShaking with Webpack with Webpack 4?

Question

I want to tree shake lodash as well as my unused multiply function from the generated bundle from webpack

I have 2 main files

Answer 1

Building off of @deadcoder0904's answer, here's how to do the same with babel-loader in webpack 4 (instead of using .babelrc):

...
        {
            test: /\.js$/,
            exclude: /node_modules/,
            use: {
                loader: 'babel-loader',
                options: {
                    plugins: ['lodash'],
                    presets: [['env', { modules: false }]]
                }
            }
        },

Note: I wasn't able to get this to work without explicitly importing from 'lodash-es' (even if I pointed lodash-es to lodash in my tsconfig (I'm using typescript). If someone can get this working without having to use the special import { map } from 'lodash-es'; and instead with import { map } from 'lodash'; it would be great to know how!

Answer 2

I found the answer

To use lodash with tree shaking we should first install lodash-es & then remove the lodash dependency

Also, it should not be transpiled first, so we make our .babelrc file as follows -

{
  "presets": [
    [
      "env",
      {
        "modules": false
      }
    ]
  ]
}

Notice, that setting modules to false makes it not transpile

And now the bundle reduces to 16.2kB & 5.79kB gzip

Some code from lodash module will still be used because it is required to run lodash itself, other than that multiply function from ./math.js isn't added in the resulting bundle

I also needed lodash-webpack-plugin for it to be working

Treeshaking works