Webpack 4 摇树 |文档 |示例差异

Question

在documentation for Webpack 4 中，他们提供了一个示例，其中包中的square 函数标有unused harmony export square 的注释。我跟着这个例子;但是，bundle.js 不包含此注释。

复制：

1. Pull the code from here
2. 执行yarn install
3. 执行yarn run build

请在此处找到我的源代码：https://gitlab.com/trevor.screws/webpack-tutorial/tree/stackoverflow_question

---

编辑：

在开发模式下使用 Webpack 4.1.1，这是我的 bundle.js 文件中的输出：

/***/ 
"./src/math.js":
/*!*********************!*\
!*** ./src/math.js ***!
\*********************/
/*! exports provided: square, cube */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
eval("__webpack_require__.r(__webpack_exports__);
\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__,
\"square\", function() { return square; }); \n/* harmony export (binding) */
__webpack_require__.d(__webpack_exports__, \"cube\", function() { return cube;
});\nfunction square(x) {\r\n    return x * x;\r\n}\r\n\r\nfunction cube(x)
{\r\n    return x * x * x;\r\n}\n\n//# sourceURL=webpack:///./src/math.js?");

/***/ })
/******/ });

Answer 1

您的函数没有被删除的原因是您正在使用mode: "development" 构建，它不包含支持死代码消除的缩小器。相关细节在Webpack的Tree Shaking Guide：

缩小输出

所以我们已经使用import 和export 语法提示我们要删除的“死代码”，但我们仍然需要从包中删除它。为此，我们将使用 -p（生产）webpack 编译标志来启用 uglifyjs 缩小插件。

请注意，--optimize-minimize 标志也可用于插入 UglifyJsPlugin。

从 webpack 4 开始，这也可以通过“模式”配置选项轻松切换，设置为 "production"。

似乎 Webpack 本身不执行 tree-shaking（据我所知），而是将任务委托给您使用的任何缩小插件（通常是 UglifyJS，但 babel-minify-webpack-plugin 也是一个不错的插件）