使用Webpack 4在javascript文件中命名的函数

Question

我刚开始在一个项目中使用Webpack 4，而且是Webpack的新手。 一旦实现了Webpack 4，我注意到命名函数一直出错，说没有定义[functionName]。

在过去的几天里，我已经看了很多，并尝试了多种选择但没有成功。 我希望有人能以更直接的方式帮助我解决这个问题。

function openNav(obj) {
    ...do something
}

@foreach (object in list)
{
 ...create some HTML

}

const bundleFileName = 'bundle';
const dirName = 'wwwroot/dist';

module.exports = (env, argv) => {
    return {
        mode: argv.mode === "production" ? "production" : "development",
        entry: [
            './src/Index.js',
            './src/css/site.css',
            './src/js/app.js'
        ],

        output: {
            filename: bundleFileName + '.js',
            path: path.resolve(__dirname, dirName)
        },
        module: {
            rules: [
                {
                    test: /\.css$/,
                    use: [{ loader: 'style-loader' }, { loader: 'css-loader' }]
                }
            ]
        },
        plugins: [
            new webpack.ProvidePlugin({
                $: 'jquery',
                jQuery: 'jquery'
            }),
            new CleanWebpackPlugin(),
            new MiniCssExtractPlugin({
                filename: bundleFileName + '.css'
            })
        ]
    };
};

我期望剃刀文件中的按钮将对象发送到命名函数，这样就可以像之前在webpack之前那样发生

Answer 1

您已经说过要尝试使用onclick属性中的openNav 。 问题在于openNav必须是以这种方式使用的全局 ，但Webpack是一个模块捆绑器 。 模块顶层的函数不是全局变量。 （这是件好事。）

解决方案是不使用onxyz -attribute样式的事件处理程序。 相反，使用现代事件处理（ addEventListener ，可能至少有一些事件委托）。

为了简化从旧方式到现代方式的转换，您可以在这样的模块中全局公开函数（在浏览器上）：

window.openNav = openNav;

我强烈建议只暂时这样做，以便更容易过渡到现代事件处理。

Answer 2

多数民众赞成因为您的webpack配置未设置为了解如何处理javascript文件，请将其添加到您的规则键：

{
  test: /\.jsx?/,
  loader: 'babel-loader'
}

你还需要安装与你的babel核心兼容的版本的babel加载器，对于v7 ^你需要安装@ babel / core @ babel / loader等，否则，babel-loader等