Webpack 只编译自调用函数，不编译任何其他函数

Question

我正在使用 Webpack 将我所有的 .js 文件编译并捆绑到一个文件中。它编译导入的 jquery 和 bootstrap 文件，但是当涉及到我自己在 main.js 中的代码时，如下所示，它只编译 console.log('Hello World'); 而不是 searchTable或任何其他功能。

import jQuery from 'jquery';
import bootstrap from '../../../node_modules/bootstrap/dist/js/bootstrap.bundle';

console.log('Hello World');

const searchTable = (tableId) => {
    const input = document.querySelector('#tableSearchInput');
    const filter = input.value.toUpperCase();
    const table = document.querySelector('#' + tableId);
    const tr = table.getElementsByTagName('tr');

    for (i = 0; i < tr.length; i++) {
        const td = tr[i].getElementsByTagName('td')[0];
        if (td) {
            const txtValue = td.textContent || td.innerText;
            if (txtValue.toUpperCase().indexOf(filter) > -1) {
                tr[i].style.display = "";
            } else {
                tr[i].style.display = "none";
            }
        }
    }
};

Webpack.config.js 文件

const path = require('path');

module.exports = {
    entry: './public/src/js/main.js',
    output: {
        path: path.resolve(__dirname, './public/dist/js'),
        publicPath: '',
        filename: 'app.js'
    },
    mode: 'production'
};

我搜索了很多，但找不到答案。
您的帮助可能会拯救我，我将不胜感激！

Answer 1

Webpack 有一个叫做 Tree shaking 的过程。 Tree shaking 或 dead code elimination 意味着在构建过程中未使用的模块将不会包含在 bundle 中。
像 webpack 这样的工具会检测死代码并将其标记为“未使用的模块”但它不会删除代码.

要了解更多信息，您可以查看此 link：https://webpack.js.org/guides/tree-shaking/

Webpack 只编译自调用函数，不编译任何其他函数

Webpack compiles self invoke functions only, not the any other function

javascript

node.js

webpack

webpack-5