javascript - webpack 是静态编译的吗？

Question

让我们看一个例子：

我的.js

function fn2()
{
    console.log("I am fn2.");
}
export const fn1 = function (){
    console.log("I am fn1.");
}

index.js

import {fn1} from 'src/my'

function component() {
  const element = document.createElement('div');
  fn1();
  fn1 = 1;
  return element;
}

document.body.appendChild(component());

我npx webpack --mode development 用来获取bundle.js：

--- something ---


/***/ "./src/my.js":
/*!*******************!*\
  !*** ./src/my.js ***!
  \*******************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

"use strict";
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"fn1\": () => (/* binding */ fn1)\n/* harmony export */ });\nfunction fn2() {\n  console.log(\"I am fn2.\");\n}\n\nconst fn1 = function () {\n  console.log(\"I am fn1.\");\n};\n\n//# sourceURL=webpack://webpack-demo/./src/my.js?");


--- something ---

我发现两个问题：

• 1. 它包括未使用 fn2的功能。
• 2. 我用 1 分配了常量fn1，但编译通过。

注意： webpack 5.26.0

标签： javascriptwebpack