webpack构建后如何保留所有功能？

Question

Webpack 检查函数的使用并删除（作为死代码）“未使用”的函数。但是如果我在 HTML 中使用函数，如果 none 脚本调用它，相同的函数将被删除。

例如，我有 script.js:

function doSomething() {
    console.log("clicked button");
}

function explicitUsedFunction() {
    console.log("Hey, function called!");
}

explicitUsedFunction();

和index.html：

<html>
    <head>
        <title>Test</title>
        <script src="script.js"></script>
    </head>
    <body>
        <button onclick="doSomething()">Button</button>
    </body>
</html>

doSomething 函数被 onclick 按钮事件使用。

这是我的 webpack.config.js:

const path = require('path');
const TerserMinimizer = require('terser-webpack-plugin');

module.exports = {
    mode: 'production',
    entry: ["./script.js"],
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    optimization: {
        minimize: true,
        minimizer: [
            new TerserMinimizer({
                terserOptions: {
                    keep_classnames: true,
                    keep_fnames: true
                }
            })
        ]
    }
};

我正在使用 TerserPlugin 来保留函数名称（因为 HTML 不会被修改）。因此，bundle.js 文件将是：

!function explicitUsedFunction(){console.log("Hey, function called!")}();

doSomething 函数被删除了，问题是，如何使用 Webpack 在 bundle.js 中保留所有声明的函数？

回答需要理解的几点：

上面的例子只是为了方便代码阅读，我不会对按钮使用 addEventListener（因为如果我有大约 20 个不同的按钮（使用该函数）并不是一个有用的答案 addEventListener 到所有按钮）
我没有使用 import/export 关键字，因为它只是一个由脚本标签导入的简单 javascript 文件，使用 import/export 关键字会导致“SyntaxError: Invalid token”

Answer 1

经过与webpack的多次较量，我找到了一个简单的解决方案。我需要两件事：将所有函数发送到缩小文件并使事件函数在 window 的范围内可用。 A 刚刚为我需要的每个功能添加了以下行：

function doSomething() {
    console.log("clicked button");
}

function explicitUsedFunction() {
    console.log("Hey, function called!");
}

explicitUsedFunction();

/*NEW LINE HERE:*/
window.doSomething = doSomething;

通过这个简单的更改，我告诉 webpack 该函数已被使用，我不再需要 Terser (webpack.config.js):

const path = require('path');

module.exports = {
    mode: 'production',
    entry: ["./script.js"],
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    }
};

webpack构建后如何保留所有功能？

How to keep all functions after webpack build?

html

javascript

minify

webpack