网页包。JS 汇编

不久前熟悉webpack，有几个问题，主要是内联函数和简单函数没有收集。

也就是说，我有一个 JS 代码，它会在点击时显示警报：

const authPost = function authPost() {
        alert("Hello! I am an alert box!!");
}

或者只是一个函数：

function authPost() {
        alert("Hello! I am an alert box!!");
}

归根结底，webpack 删掉了这个函数，只留下了 alert，这就是为什么不能调用这个函数，并且在页面加载时会触发 alert。

如何解决这个问题，以便 webpack 正确构建 JS？我的配置如下所示：

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const devMode = process.env.NODE_ENV !== 'production';
const path = require('path')

const dir = 'exp'

module.exports = {
    mode: 'production',
    entry: './webpack/app.js',
    output: {
        path: path.resolve(__dirname, dir),
        filename: 'js/[name].bundle.js'
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: devMode ? 'css/[name].css' : 'css/[name].[hash].css',
            chunkFilename: devMode ? 'css/[id].css' : 'css/[id].[hash].css',
        }),
    ],
    module: {
        rules: [
            {
                test: /\.(sa|sc|c)ss$/,
                use: [{
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            hmr: process.env.NODE_ENV === 'development',
                        },
                    },
                    'css-loader',
                    'postcss-loader',
                    'sass-loader',
                ],
            },{
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
loader: 'babel-loader',
                    options: {
                        presets: ["@babel/preset-env"]
                    }
            },{

            }


        ],
    },
};