2

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

重现：

  1. 从这里提取代码
  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?");

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

1 回答 1

1

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

缩小输出

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

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

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

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

于 2018-04-01T17:11:17.353 回答