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

yftpprvb 于 12个月前发布在 Webpack

关注(0)|答案(1)|浏览(125)

Webpack会检查函数的使用情况，并删除（作为死代码）“未使用”的函数。但如果我在HTML中使用函数，如果没有脚本调用它，相同的函数将被删除。
例如，我有脚本.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不会被修改）。所以，flexle.js文件将是：

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

型
doSomething函数被删除了，问题是，我如何使用Webpack在Weble.js中保留所有声明的函数？
关于答案的一些要点需要理解：

上面的例子只是为了方便代码的阅读，我不会使用addEventList到按钮（因为如果我有大约20个不同的按钮（使用函数）是不是一个有用的答案addEventList到所有按钮）
我没有使用导入/导出关键字，因为只是一个简单的JavaScript文件通过脚本标签导入，使用导入/导出关键字会导致“SyntaxError：Invalid token”

webpack

来源：https://stackoverflow.com/questions/64514235/how-to-keep-all-functions-after-webpack-build

1条答案

按热度按时间

im9ewurl1#

经过与webpack的多次斗争，我找到了一个简单的解决方案。我需要两件事：将所有函数发送到缩小的文件，并使事件函数在窗口的作用域上可访问。我只是为我需要的每个函数添加了以下行：

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

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

explicitUsedFunction();

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

字符串
通过这个简单的更改，我告诉webpack该函数已被使用，我不再需要Terser（webpack.js.js）：

const path = require('path');

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

型

赞(0）回复(0）举报 12个月前

我来回答

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

1条答案

相关问题

热门标签

最新问答