如何防止在webpack构建过程中删除未使用的代码

Question

我正试图使用webpack(v5.6.0(将一些JavaScript捆绑到ESM(又名ES6模块、ECMAScript模块(中，该模块不单独运行，而是可以用作另一个应用程序的库。我希望其他应用程序可以选择只使用<script src="..." type="module">包含此库，而不必有自己的构建步骤和担心依赖性。

在库的项目中，我将"type": "module"添加到我的package.json中，让它知道它是ESM，并且我有一个带有index.js和dist的src文件夹，用于输出webpack。

我的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可能只是缺少了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实际上有一个创建库的设置！你试过了吗？

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

这是一些附加信息。