带网页包的HTML内联javascript

我现在开始在我的网站上使用webpack，我有一个问题

我目前有一个包含javascript包的html页面，在html中嵌入的按钮中有一些

onclick

函数。我想保留这些按钮的功能和点击按钮的功能，但目前我还没有找到一种方法。显然，如果我尝试缩小javascript函数，函数的名称就会改变，并且无法工作

下面是一个示例，其中webpack生成的包包含在html文件中：

test

和当前未定义的

foo

我尝试过使用html网页包插件，但没有成功

---

有什么方法可以做到这一点吗？

是的，您可以使用该函数，但仍然需要稍微修改代码-单击

网页包

const path = require('path');
const HtmlWebPackPlugin = require('html-webpack-plugin');
const {
  CleanWebpackPlugin
} = require('clean-webpack-plugin');

module.exports = (env, argv) => {
  return {
    devtool: argv.mode === 'production' ? 'none' : 'source-map',
    mode: argv.mode === 'production' ? 'production' : 'development',
    entry: {
      MYSCRIPT: './sources/script.js'
    },
    output: {
      path: path.resolve(__dirname, './dist'),
      filename: './[name].js',
      library: '[name]',
      libraryTarget: 'var',
    },
    module: {
      rules: [{
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      }, ]
    },
    plugins: [
      new CleanWebpackPlugin({
        verbose: true
      }),
      new HtmlWebPackPlugin({
        filename: 'index.html',
        template: './sources/index.html'
      })
    ]
  }
}

最重要的部分是名称输入和输出。 您还必须导出每个函数

JS

export function test(type) {
  alert(type);
}

我们可以这样得到函数

HTML

<a onClick="MYSCRIPT.test('bar')">click</a>

---

在fiddle中添加代码，这样我们就可以找到解决方案。这是否回答了您的问题@克里斯蒂，对不起，没有。看起来这个答案中的人似乎无法让它工作。@chandukomati我添加了小提琴。我已经检查了你的代码，我认为你需要添加jquery.js is file。非常感谢！一个简单的问题--
库
和
库目标
做了什么，js是如何包含在html中的？非常感谢。你可以在这里找到确切的描述。您可以在
github/docs/index.html
上检查文件是如何添加的，这里有结果文件。请记住，如果您的库很大，无法加载，并且有人单击onClick，则会发生错误。这个html中的内联js解决方案不是而且从来都不是一个好的解决方案；）啊，谢谢你，出于兴趣，“正确”的方法是什么？页面上有许多按钮，我不想添加15个以上的事件侦听器。。还有别的办法吗？此外，动态列表中的按钮具有不同的参数，这又如何呢？抱歉问了这么多问题：不客气。您可以构建一个全局函数来触发其他函数。在html
data click=“{'function'：'foo'，'data'：'bar}”中可能会出现类似的情况当然，这都是相对的，取决于您拥有的功能以及它与您的外观。祝你好运；）啊，我明白了。但这样做的好处是什么？