javascript - 如何在 HTML 页面中包含 webpack 生成的文件？

Question

我有一个简单的(传统 html、css、js)Web 项目，我打算使用 htmldiff-js library在我的项目中。

我尝试从 GitHub 下载 htmldiff js 并使用 script 标记直接包含在我的 HTML 页面中。 htmldiff js 使用 webpack 编译，包含 import、module 等关键字。

当我在浏览器中打开 HTML 页面时，出现错误。我的问题是我应该如何包含这个文件 - https://github.com/dfoverdx/htmldiff-js/blob/master/dist/htmldiff.js在我的 HTML 页面中。

我对 webpack 的了解非常少。我不太确定这里的正确解决方案。我现在将更详细地阅读 webpack，但任何指示都可能非常有帮助。

示例代码

index.html

<!-- HTML Diff JS -->
<script type="text/java" src="js/htmldiff.js"></script>
<script type="text/javascript" src="js/main.js"></script>

main.js

$('#compute-diff-button').click(function() {
  // diffUsingJS(v1Content, v2Content);
  var diffoutputdiv = document.getElementById('diffoutput');

  v1Content = "<button id=\"compute-diff-button\" class=\"btn btn-sm btn-success\">Show Diff</button><p>Old Text</p>";
  v2Content = "<button id=\"compute-diff-button\" class=\"btn btn-sm btn-success\">Show Diff</button><p class='text-center'>Some new text</p>";

  diffoutputdiv.innerHTML = Diff_HtmlDiff.execute(v1Content, v2Content);
});

Answer 1

好的，这是一个替代答案，您无需了解 Webpack。

如果您更改 webpack.config.js line 16来自commonjs2至umd ，然后运行npm run build ，您将得到 ./dist/htmldiff.js和./dist/htmldiff.min.js您可以使用它来将其带入您的 index.html通过 <script src="..."></script>标签。

我什至将输出上传到 gist here并确认库的自述文件中的演示代码大部分都可以工作(待处理一些 small changes I made in a pull request )。只需删除 import关于 line 39 的声明在示例中并使用 HtmlDiff.default.execute(...)而不是HtmlDiff.execute(...)上line 46 ，你就可以开始了!

以下是自述文件中的示例在一切正常运行时的样子。 (请注意，第三行显示了 HTML 差异。)

祝你好运!