带有 webpack 的 HTML 内联 javascript答案

【问题标题】：HTML inline javascript with webpack带有 webpack 的 HTML 内联 javascript
【发布时间】：2019-11-09 19:45:13
【问题描述】：

我目前开始为我的网站使用 webpack，我有一个问题。

我目前有一个 html 页面，其中包含我的 javascript 包，并且在 html 中嵌入的按钮中有一些 onclick 函数。我想保留这些按钮和onclick 的功能，但目前我还没有找到这样做的方法。显然，如果我尝试缩小 javascript 函数，函数的名称会发生变化，并且不起作用。

这里是一个例子，其中 webpack 生成的 bundle 包含在 html 文件中：

<button onclick="foo("bar")">test</button> 和当前foo 未定义。

我尝试使用 html webpack 插件没有成功。

有什么办法吗？

【问题讨论】：

在fiddle中添加代码，以便我们找到解决方案。
这能回答你的问题吗？ Calling webpacked code from outside (HTML script tag)
@Cristy 抱歉，没有。似乎该答案中的人无法使其正常工作。
@chandukomati 我加了小提琴。
我检查了你的代码我认为你需要添加 jquery.js 是文件

标签： javascript html webpack webpack-4

【解决方案1】：

是的，您可以使用该功能，但您仍然需要稍微修改代码 - onClick。

网络包

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'
      })
    ]
  }
}

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

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

我们可以通过这种方式获得函数。

HTML

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

您可以找到整个设计示例here。

【讨论】：

非常感谢！一个快速的问题 - library 和 library target 做什么以及 js 如何包含在 html 中？非常感谢。
你可以在这里找到确切的描述outputlibrarytarget。您可以在github/docs/index.html 处查看文件是如何添加的，有结果文件。请记住，如果您的库很大并且无法加载并且有人单击 onClick，则会发生错误。 html 中的这种内联 js 解决方案不是，也从来不是一个好的解决方案；)
啊，谢谢您-出于兴趣，“正确”的方法是什么？页面上有很多按钮，我不想添加 15 个以上的事件侦听器。还有其他方法吗？此外，动态列表都有不同参数的按钮怎么办？抱歉问了这么多问题：P
不客气。您可以构建一个全局函数来触发其他函数。在 html data-click="{'function': 'foo', 'data': 'bar'}"; 中可能会有这样的内容当然，这都是相对的，取决于您拥有哪些功能以及它与您的外观。祝你好运；）
啊，我明白了。这样做有什么好处？