Webpack输出不荣誉自己重命名的串联模块

iyfjxgzm  于 2023-06-30  发布在  Webpack
关注(0)|答案(1)|浏览(129)

我有一个简单的节点项目,我使用webpack-stream(通过Gulp)将多个JS文件捆绑到一个输出文件中。webpack必须以这样一种方式连接文件,看起来就像您在一个文件中编写了所有代码。
例如,输出文件的运行时期望全局声明startTest()函数。
出于这个原因,我禁用了某些优化,这些优化将封装或缩小输出代码。
考虑以下我的项目的简化代码:

main.js:

import VoiceGender from "./models/VoiceGender";

console.log(VoiceGender.MALE);

function startTest() {
  console.log(VoiceGender.MALE);
}

VoiceGender.js:

const VoiceGender = {
  MALE: 'M',
  FEMALE: 'F'
}

export default VoiceGender;

webpack配置:

{
   "mode":"production",
   "output":{
      "iife":false,
      "filename":"bundle.js"
   },
   "optimization":{
      "minimize":false,
      "usedExports":false,
      "mangleExports":false
   },
   "cache":{
      "type":"filesystem"
   }
}

bundle.js(webpack输出):

/******/ "use strict";
/******/ // The require scope
/******/ var __webpack_require__ = {};
/******/ 
/************************************************************************/
/******/ /* webpack/runtime/make namespace object */
/******/ (() => {
/******/    // define __esModule on exports
/******/    __webpack_require__.r = (exports) => {
/******/        if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/            Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/        }
/******/        Object.defineProperty(exports, '__esModule', { value: true });
/******/    };
/******/ })();
/******/ 
/************************************************************************/
var __webpack_exports__ = {};
// ESM COMPAT FLAG
__webpack_require__.r(__webpack_exports__);

;// CONCATENATED MODULE: ./src/models/VoiceGender.js
const VoiceGender_VoiceGender = {
    MALE: "M",
    FEMALE: "F"
};

/* harmony default export */ const models_VoiceGender = (VoiceGender_VoiceGender);
;// CONCATENATED MODULE: ./src/main.js

console.log(models_VoiceGender.MALE);

function startTest() {
    console.log(VoiceGender.MALE);
}

请注意,startTest()函数上面的console.log(..)使用Webpack生成的名称(这很好),但在startTest()函数内部,它不使用该引用。这是错误的引用,因为Webpack在models_VoiceGenderVoiceGender_VoiceGender下声明了模块,而不是VoiceGender
我不知道是什么引起的。可能是个虫子?我试着在某些属性上玩,但我看不到任何变化。

webpack-stream版本:^7.0.0
gulp版本:^4.0.2
webpack版本(通过webpack-stream):^5.21.2
**UPDATE:**在startTest()函数中添加export时,引用是固定的。或者,在该脚本中调用startTest()也会修复该引用。我已经将webpack配置为不排除“未使用”的代码,但它似乎没有正确地捆绑未使用的代码。

pod7payv

pod7payv1#

我已经让这个坐了一会儿,看看是否有更多的人可以在这个权衡,但我认为这实际上是一个错误或webpack的副作用,我应该报告它。
基本上,webpack被配置为保留未使用的代码。即使运行时会调用startTest()函数,webpack也不知道,所以对于webpack来说,这是未使用的代码。
出于某种原因,webpack没有“努力”在“未使用”的代码中使用正确的模块名称。我想这是一个bug。
解决方法是使代码显示为由以下人员使用:
1.将export添加到函数中
1.在JS中调用函数(不适合我的用例)
所以最后,解决方法是好的,也许它们在语义上是正确的。

相关问题