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

Question

Webpack 檢查函數的使用並刪除（作為死代碼）“未使用”的函數。 但是如果我在 HTML 中使用 function，如果沒有腳本調用它，相同的 function 將被刪除。

例如，我有 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 function 被 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 來保留 function 名稱（因為 HTML 不會被修改）。 因此，bundle.js 文件將是：

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

doSomething function 已被刪除，問題是，如何使用 Webpack 將所有聲明的函數保留在 bundle.js 中？

需要了解有關答案的一些要點：

上面的示例只是為了方便代碼閱讀，我不會對按鈕使用 addEventListener（因為如果我有大約 20 個不同的按鈕（使用該功能）並不是一個有用的答案 addEventListener 到所有按鈕）
我沒有使用 import/export 關鍵字，因為它只是一個簡單的 8822996504788 文件，由腳本標簽導入，使用 import/export 關鍵字會導致“SyntaxError: Invalid token”

Answer 1

經過與 webpack 的多次斗爭，我找到了一個簡單的解決方案。 我需要兩件事：將所有 function 發送到縮小文件並使事件函數在窗口的 scope 上可用。A 剛剛為我需要的每個 function 添加了以下行：

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

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

explicitUsedFunction();

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

通過這個簡單的更改，我告訴 webpack 使用了 function，我不再需要 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構建后如何保留所有功能？

問題描述

1 個解決方案

解決方案1
6 已采納 2020-10-25 19:13:15

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

問題描述

1 個解決方案

解決方案1 6 已采納 2020-10-25 19:13:15

解決方案1
6 已采納 2020-10-25 19:13:15