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

在中，它们提供了一个示例，其中捆绑包中的

square

函数被标记为注释

unused harmony export square

。我跟随这个例子；但是，bundle.js不包含此注释

复制：

执行

纱线安装

执行

纱线运行构建

请在此处找到我的源代码：

---

编辑：

在开发模式下使用Webpack 4.1.1，这是my 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?");

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

---

您的函数没有被删除的原因是您使用的是

模式：“development”

，该模式不包括支持消除死代码的小型化程序。有关详情载于网页：

缩小输出 因此，我们已经通过使用

import

和

export

语法提示要删除的“死代码”，但我们仍然需要将其从捆绑包中删除。为此，我们将使用

-p

（生产）网页包编译标志来启用uglifyjs缩小插件

请注意，

--optimize minimize

标志也可用于插入UglifyJsPlugin

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

“生产”

---

似乎Webpack本身不执行树摇动（据我所知），而是将任务委托给您所使用的任何缩小插件（通常是UglifyJS，但

babel minify Webpack plugin

也是一个好插件）

在生产模式下构建时，不包括该功能（即，它按预期工作）。但是，在开发模式下，函数没有像文档中所说的那样标记为/*未使用的harmony export square*/。我可以按照指南中的说明复制您的发现。我认为这是一个文档错误，在开发模式下，

未使用的harmony export square

不再在包中生成。您好@rossipedia，感谢您花时间回复。我认为问题的一部分是，我希望

未使用的函数

注释出现在bundle for development模式中。我还可以确认，在生产模式下，它正在删除该功能，因此，可能我昨天查看该文件的旧版本时遇到了问题。我将更新这个问题，使其更具体地说明缺少的评论。看起来指南正在更新，所以可能只是版本之间存在差异。