Question

我对webpack很新。我将webpack配置为捆绑所有js文件并在html文件中使用它作为尝试学习es6。

现在我在'./app/index.js'文件中有一个功能

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

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

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()"/>

浏览器抛出错误，

未捕获的ReferenceError：未定义oops。

我无法弄清楚自己为什么会这样。我后来发现here

这在index.js文件中

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

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

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

0 个答案: