Webpack 在最终包中包含未使用的导出（不是摇树）

Question

我有一个设置，其中一个库的 index.js（主入口点）导出 lib 中的所有内容......所以它的设置是这样的：

export * from "./mod1"
export * from "./mod2"
// etc...

（看看）

当我从该入口点导入 1 个导出的库时，看起来 Webpack 无法摇动输出。运行webpack -p实际上是将整个库包含在包中，尽管只导入了一个导出。运行webpack（非生产包）确实显示unused harmony export ....在整个文件中（167 次），但为什么它们没有被删除？

我有一个测试设置在这里显示这个问题：https : //github.com/purtuga/webpack-bundle-test

希望有人（比我更聪明:)）可以帮助确定我做错了什么。

/保罗

Answer 1

当您捆绑应用程序而不进行转换（如 Babel）和缩小（如 UglifyJS）时，您会得到：未使用的 Harmonic 导出。

\n

现在，Webpack 2+ 仅标记未使用的代码，并且不会\xe2\x80\x99t 将其导出到模块内。它提取所有内容并为缩小库留下未使用的代码。

\n

你可以使用UglifyJS为此，您将需要 Babel 将代码转换为 ES5，然后使用 UglifyJS 清理未使用的代码。

\n

您将需要 .babelrc 文件：

\n

我们必须告诉预设（在我们的例子中是babel-preset-env）跳过模块转译。

\n

    {\n      "presets": [\n        ["env", {\n          "loose": true,\n          "modules": false\n        }]\n      ]\n    }\n

\n

以及相应的 webpack 配置：

\n

    module: {\n      rules: [\n        { test: /\\.js$/, loader: \'babel-loader\' }\n      ]\n    },\n    \n    plugins: [\n      new webpack.LoaderOptionsPlugin({\n        minimize: true,\n        debug: false\n      }),\n      new webpack.optimize.UglifyJsPlugin({\n        compress: {\n          warnings: true\n        },\n        output: {\n          comments: false\n        },\n        sourceMap: false\n      })\n    ]\n

\n

或者

\n

巴比利是一个更好的选择，因为 Babili 会在转译之前删除未使用的代码。在降级到 ES5 之前，更容易发现未使用的类。树摇动也适用于类声明，而不仅仅是函数。

\n

你会需要：

\n

npm install [babili][3] [babili-webpack-plugin][4] --save-dev\n

\n

在 webpack 配置中使用以下插件，如下所示：

\n

npm install [babili][3] [babili-webpack-plugin][4] --save-dev\n

\n

还有一种使用 babili 作为预设的优化方法。您可以参考他们的网站，将其用作 babel-loader 的预设。

\n