Webpack 3，Babel和Tree Shaking无法正常工作

Question

我正在尝试找到一种方法来塑造我的模块并将babel与webpack一起使用。

如果我从WebPack文档（https://webpack.js.org/guides/guides/tree-shaking/）中获取示例代码，并运行它，则未使用的模块/函数/其他导出的模块/函数/其他未使用的导出被标记为未使用和谐出口，这是预期的结果。使用-P参数（生产）运行WebPack后，WebPack使用uglifyjs删除死者和未使用的代码（To TreeShake）。

现在，如果我将babel-loader添加到我的WebPack配置文件中，则我的ES2015模块将被转移，但现在不再标记为未使用的导出。

所以：

Math.js

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

app.js（我的输入文件）

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

通过webpack 无需 babel-loader，cube功能将被标记为未使用并在编译生产后删除（-p）。

通过WebPack 使用 babel-loader运行此功能，cube功能不会标记为未使用，并且会保留在编译的捆绑包中。

我缺少什么？

编辑

这是一个可以复制情况的演示回购

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

更新

如果我添加了.babelrc：

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

我得到相同的结果，但是如果我将modules: false添加到预设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模块的树木。

更新

如果您使用的是Babel 7（以及@babel/preset-env），则在WebPack中使用modules选项现在自动使用false，因此不再需要此明确配置。