Javascript 如何防止未使用的代码在网页包构建过程中被删除？

我正在尝试使用WebpackV5.6.0将一些JavaScript捆绑到ESM aka中。ES6模块，ECMAScript模块，它不单独运行，而是可以用作另一个应用程序的库。我希望另一个应用程序可以选择只使用这个库，而不必有自己的构建步骤和担心依赖性

在库的项目中，我将type:module添加到我的package.json中，我有一个src文件夹和一个index.js，还有一个dist文件夹用于webpack的输出

我的webpack.config.cjs文件如下所示：

常量路径=要求“路径”； module.exports={ 条目：{ 索引：'./src/index.js'， //计划在这里有更多的代码拆分 }, 输出：{ 路径：path.resolve\u dirname'./dist'， 文件名：'[name].bundle.min.js'， }, 优化：{ //removeEmptyChunks:false，//尝试了这个，似乎没有帮助 }, }; my index.js的简化版本是：

const hello==>{console.log'hello world'；}； 导出默认值{hello}； 最终这里会有实际的代码、许多不同的文件、依赖项等

当我运行webpack时，会创建一个index.bundle.min.js文件，但它是完全空白的。对于这个简单的示例，我希望它看起来非常像源文件。看起来Webpack正在删除未运行的代码，这在某些情况下可能是有用的优化，这不是我想要的

---

如果我加上你好；对于我的index.js，我确实在构建的文件中得到了一些代码，但我不想运行任何代码，而且它仍然没有像我所希望的那样公开这些方法供以后使用。

Webpack实际上有一个设置！你试过了吗

module.exports={ //... 输出：{ 图书馆：“我的图书馆” } };

---

是一些附加信息。

网页实际上有一个设置！你试过了吗

module.exports={ //... 输出：{ 图书馆：“我的图书馆” } };

---

是一些附加信息。

Pytth的解决方案解决了代码未显示的问题，但没有解决在ESM中创建库文件（即使用导出）的问题。可悲的是，我认为Webpack可能只是缺少了图书馆目标的明显标志：“esm”

我想起了我曾经遗憾地使用过的一个解决方案：创建一个包含配置选项的构建文件，将库输出到窗口：

条目：{ “myLib”：“./src/index.js”， }, 输出：{ 库：“[name]”， libraryExport:“默认值”， libraryTarget:'窗口'， 路径：path.resolve\u dirname'./dist'， 文件名：'[name].window.js'， }, 然后在dist文件夹中包含另一个未生成的文件，例如，myLib.esm.js，它只有：

导入“/myLib.window.js”； const myLib=window.myLib； 删除window.myLib； 导出默认myLib；

---

Pytth的解决方案解决了代码不显示的问题，但没有解决在ESM中创建库文件（即使用导出）的问题。可悲的是，我认为Webpack可能只是缺少了图书馆目标的明显标志：“esm”

我想起了我曾经遗憾地使用过的一个解决方案：创建一个包含配置选项的构建文件，将库输出到窗口：

条目：{ “myLib”：“./src/index.js”， }, 输出：{ 库：“[name]”， libraryExport:“默认值”， libraryTarget:'窗口'， 路径：path.resolve\u dirname'./dist'， 文件名：'[name].window.js'， }, 然后在dist文件夹中包含另一个未生成的文件，例如，myLib.esm.js，它只有：

导入“/myLib.window.js”； const myLib=window.myLib； 删除window.myLib； 导出默认myLib；

---

它很难看，但确实有用。

谢谢！我忘记了输出库参数。遗憾的是，没有libraryTarget:'esm'，更改package.json中的类型值似乎不会影响webpack。使用libraryTarget：“umd”并不能真正完成同样的任务。谢谢！我忘记了输出库参数。遗憾的是，没有libraryTarget:'esm'，更改package.json中的类型值似乎不会影响webpack。使用libraryTarget：“umd”并不能真正完成同样的任务。