如何防止在 webpack 构建期间丢弃未使用的代码？

Question

我正在尝试使用 webpack (v 5.6.0) 将一些 JavaScript 捆绑到一个 ESM（又名 ES6 模块，ECMAScript 模块）中，它不能自行运行，而是可以用作另一个库应用程序。我希望其他应用程序可以选择简单地使用 <script src="..." type="module"> 包含此库，而不必有自己的构建步骤并担心依赖关系。

在库的项目中，我已将"type": "module" 添加到我的package.json 到let it know it's an ESM，并且我有一个src 文件夹，其中包含一个index.js 和一个用于webpack 输出的dist 文件夹。

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

const path = require('path');

module.exports = {
    entry: {
        index: './src/index.js',
        // plan to have more here for code spliting
    },
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: '[name].bundle.min.js',
    },
    optimization: {
        // removeEmptyChunks: false, // Tried this, didn't seem to help
    },
};

我的index.js 的简化版本是：

const hello = () => { console.log('Hello world'); };
export default { hello };

最终这里会有实际代码，许多不同的文件、依赖项等。

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

如果我将hello(); 添加到我的index.js 中，那么我确实会在我的构建文件中获得一些代码，但我不想运行任何代码，而且它仍然没有像我一样公开这些方法以供以后使用喜欢。

Answer 1

Pytth 的解决方案解决了代码不显示的问题，但没有解决在 ESM 中创建库文件的问题（即使用export）。可悲的是，我认为 Webpack 可能只是缺少明显的 option for libraryTarget: 'esm'。

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

entry: {
    'myLib': './src/index.js',
},
output: {
    library: '[name]',
    libraryExport: 'default',
    libraryTarget: 'window',
    path: path.resolve(__dirname, './dist'),
    filename: '[name].window.js',
},

然后在 dist 文件夹中包含另一个（非生成的）文件，例如，myLib.esm.js，它只有：

import './myLib.window.js';
const myLib = window.myLib;
delete window.myLib;
export default myLib;

它很丑，但它确实有效。

Answer 2

Webpack 实际上有一个creating libraries 的设置！你试过吗？

module.exports = {
  //...
  output: {
    library: 'MyLibrary'
  }
};

Here 是一些附加信息。