时间戳

首页 > 解决方案 > webpack构建后如何保留所有功能？

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

问题描述

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

例如，我有 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>

onclick 按钮事件使用 doSomething 函数。

这是我的 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 中？

关于答案的一些要点需要理解：

标签： javascripthtmlwebpackminify

解决方案

经过与 webpack 的大量斗争，我找到了一个简单的解决方案。我需要两件事：将所有函数发送到缩小文件并使事件函数在窗口范围内可访问。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'
    }
};

推荐阅读