Javascript 如何从webpack生成的包访问客户端的代码

我对webpack很陌生。我将webpack配置为捆绑所有js文件，并将其用于html文件中，以尝试学习es6

现在我在“./app/index.js”文件中有了一个函数

export function oops() {
  console.log("oops");
}

在index.js文件中。我的网页包配置看起来像

var webpack = require('webpack');

const path = require('path');

module.exports = {
  entry: './app/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  plugins: [
    new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery"
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true,
      debug: false
    })
  ],
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 3000,
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules|dist/,
        loader: "babel-loader"
      }
    ]
  }
};

如果尝试访问，则在按钮单击事件中访问方法oops（）

<input type="button" value="Submit" onClick="oops()"/>

---

他正在工作。还有别的办法吗？为什么webpack不允许访问它外部定义的方法？

你的函数在另一个JS文件中吗？如果是这样，您需要将该文件导入到同一文件中的index.jsIts中。如果该函数已经存在于index.js文件中，则不需要导出该函数。我尝试过导出该函数，但没有导出该函数。嗯，如果您在index.js中编写onClick事件，则该函数将起作用

window.oops = function(){
  console.log("oops");
};