使用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等