Webpack 3, Babel and Tree shaking do not work

Question

I am trying to find a way to train my modules and use Babel with Webpack.

If I take the example code from the webpack documentation ( https://webpack.js.org/guides/tree-shaking/ ) and run it, modules / functions / other exports that are not used are indicated as unused harmonics export, which is expected result. After running webpack with the -p (production) argument, webpack uses UglifyJS to remove dead and unused code (for tree view).

Now, if I add babel-loader to my webpack configuration file, my ES2015 modules will be overloaded, but now they are no longer marked as an unused export.

So for example:

math.js

export function square(x) {
  return x * x;
}

export function cube(x) {
  return x * x * x;
}

app.js (my input file)

import {square} from './math.js'

- babel-loader, cube (-p).

webpack babel-loader, cube .

?

-, .

https://github.com/Milanzor/babel-and-treeshaking-question

Update

.babelrc:

{
  "presets": [
    ["@babel/preset-env", {
      "useBuiltIns": "entry",
      "debug": true,
      "targets": {
        "browsers": ["last 2 versions"]
      }
    }]
  ]
}

, modules: false preset-env, Babel ES5, Webpack , .

Webpack, Babel, Babel .

Answer 1

Webpack ES6. Babel , Babel ES6 CommonJS, Webpack .

, Webpack, modules: false , ES6 (, preset-env?),

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

https://github.com/indutny/webpack-common-shake, CommonJS.