Webpack5 似乎没有对未使用的导出进行 tree-shake

Question

我使用以下文件设置了一个小项目，

- src/
  - lib/
    - lib1.ts
      - export : func_lib1_1, func_lib1_2
    - lib2.ts
      - export : func_lib2_1, func_lib2_2
  - pkg1/
    - pkg1.ts
      - import & use : func_lib1_1, func_lib2_1
  - pkg2/
    - pkg2.ts
      - import & use : func_lib1_1
  - pkg3/
    - pkg3.ts
      - import & use : func_lib1_1

我根据 官方文档：

webpack.config.js

    mode: "production",
    optimization: {
        usedExports: true,
    },

package.json

    "sideEffects": false,

pkgX.ts

    import { func_lib1_1 } from "../lib/lib1";
    
    console.log("pkgX");
    console.log(func_lib1_1());

但在结果包中我仍然看到未使用的函数 func_lib1_2 和 func_lib2_2包括：

pkg1.bundle.js

    /***/ 119:
    /***/ ((__unused_webpack_module, exports) => {
    
    Object.defineProperty(exports, "__esModule", ({ value: true }));
    exports.func_lib1_2 = exports.func_lib1_1 = void 0;
    function func_lib1_1() {
        return "func_lib1_1";
    }
    exports.func_lib1_1 = func_lib1_1;
    function func_lib1_2() {
        return "unused, shouldn't be bundled";
    }
    exports.func_lib1_2 = func_lib1_2;
    
    /***/ }),

你知道为什么吗？我能做些什么来解决这个问题并获得我所寻求的按规矩的tree-shaking？

此处提供最小重现设置

提前致谢

更新：来自 optimizationBailout 的更多信息：true

  modules by path ./src/lib/*.ts 666 bytes
    ./src/lib/lib1.ts 333 bytes [built] [code generated]
      Statement (ExpressionStatement) with side effects in source code at 2:0-62
      ModuleConcatenation bailout: Module is not an ECMAScript module
    ./src/lib/lib2.ts 333 bytes [built] [code generated]
      Statement (ExpressionStatement) with side effects in source code at 2:0-62
    ModuleConcatenation bailout: Module is not an ECMAScript module
  ./src/pkg1/pkg1.ts 263 bytes [built] [code generated]
    Statement (ExpressionStatement) with side effects in source code at 2:0-62
    ModuleConcatenation bailout: Module is not an ECMAScript module
  ./src/pkg2/pkg2.ts 182 bytes [built] [code generated]
    Statement (ExpressionStatement) with side effects in source code at 2:0-62
    ModuleConcatenation bailout: Module is not an ECMAScript module
  ./src/pkg3/pkg3.ts 182 bytes [built] [code generated]
    Statement (ExpressionStatement) with side effects in source code at 2:0-62
    ModuleConcatenation bailout: Module is not an ECMAScript module

这很有趣。我的出口申报方式有问题吗？

更新 2：它无需 ts-loader 即可工作！

我尝试将所有文​​件更改为 .js 并删除整个 ts-loader 内容。 Tree-shaking 现在按预期工作。

现在更新的问题是：如何使其与打字稿一起工作？

可能相关的类似问题，但上下文不同

• webpack 4，相同情况
• webpack 4、带有变量
• webpack 4，带导入 *

Answer 1

I figured it out myself, auto-answer for the record :

The tsconfig.json was wrong, it wasn't preserving the ES6 module syntaxe so webpack couldn't treeshake properly.

有关正确配置的更多详细信息（也可以选择包括babel）可以在此处找到