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

【问题标题】：How to include webpack generated file in an HTML Page?如何在 HTML 页面中包含 webpack 生成的文件？
【发布时间】：2019-05-22 22:15:07
【问题描述】：

我有一个简单的（传统的 html、css、js）网络项目，我打算在我的项目中使用 htmldiff-js library。

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

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

我对 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);
});

【问题讨论】：

如果您显示用于包含脚本的 HTML，您更有可能得到一个好的答案，因此我们很清楚您在做什么，并显示收到的错误消息。
感谢@joshp 的建议。我添加了一些代码作为编辑。
@sachinjain024 我在您的代码中看到了一个错字。 htmldiff.js 文件的 Mimetype 应该是“text/javascript”而不是“text/java”。
感谢@lazyvab 捕捉到这一点。我会解决的。

标签： javascript html webpack ecmascript-6 babeljs

【解决方案1】：

您可以创建一个简单的 webpack 项目，其中包含一个入口文件，该入口文件导入 htmldiff-js 模块并在 window 上公开，因此您可以从任何地方访问它。

index.js

import HtmlDiff from 'htmldiff-js';
window.HtmlDiff = HtmlDiff;

webpack.config.js

var webpack = require('webpack'),
  path = require('path'),
  CleanWebpackPlugin = require('clean-webpack-plugin');

var options = {
  entry: {
    htmldiff_generated: path.join(__dirname, 'index.js')
  },

  output: {
    path: path.join(__dirname, 'build'),
    filename: '[name].js'
  },

  plugins: [
    new CleanWebpackPlugin(['build'])
  ]
};

module.exports = options;

package.json

"scripts": {
  "build": "webpack --mode=development --display-error-details",
},
"dependencies": {
  "htmldiff-js": "^1.0.5"
},
"devDependencies": {
  "clean-webpack-plugin": "^1.0.0",
  "webpack": "^4.28.2",
  "webpack-cli": "^3.1.2"
}

index.html

<!DOCTYPE html>
<html>
<head>
  <title>Page</title>
  <script type="text/javascript" src="build/htmldiff_generated.js"></script>
</head>
<body>
  <script type="text/javascript">
    var v1Content = "<button id=\"compute-diff-button\" class=\"btn btn-sm btn-success\">Show Diff</button><p>Old Text</p>";
    var v2Content = "<button id=\"compute-diff-button\" class=\"btn btn-sm btn-success\">Show Diff</button><p class='text-center'>Some new text</p>";

    console.log(window.HtmlDiff.execute(v1Content, v2Content));
  </script>
</body>
</html>

如果您想使用HtmlDiff 以外的变量/函数，请以相同的方式在index.js 中公开。它在某种程度上违背了模块化编码的目的，但应该实现您的用例。

这也是其他节点模块可能遵循的通用策略。

【讨论】：

【解决方案2】：

好的，这是您不必了解 Webpack 的替代答案。

如果您将webpack.config.js line 16 从commonjs2 更改为umd，然后运行npm run build，您将获得./dist/htmldiff.js 和./dist/htmldiff.min.js，您可以使用它们通过@ 带入您的index.html 987654335@标签。

我什至将输出上传到gist here，并确认库 README 中的演示代码大部分都在工作（待定一些 small changes I made in a pull request）。只需删除示例中line 39 上的import 语句，并在line 46 上使用HtmlDiff.default.execute(...) 而不是HtmlDiff.execute(...)，就可以了！

这是 README 中的示例在一切正常时的样子。（请注意，第三行显示了 HTML 差异。）

祝你好运！

【讨论】：

【解决方案3】：

[编辑] 你可能不想使用我在这里列出的建议，因为我意识到你现在可能不尝试学习 Webpack。我仍然会将它留在这里，以供其他最终发现它有益的人使用，但是对于您要尝试做的事情而言，它可能过于复杂。

如果你打算自己使用 Webpack，首先，从项目目录中的任何位置运行 npm install htmldiff-js。

然后将以下行放在 JavaScript 源文件的顶部（例如，./src/index.js）： import HtmlDiff from 'htmldiff-js'; （来自https://github.com/dfoverdx/htmldiff-js#javascript）

您将能够从您已经写入import HtmlDiff from 'htmldiff-js' 的任何文件中使用名为HtmlDiff 的变量。例如，考虑在该行代码之后立即写 console.log(HtmlDiff) 以查看浏览器的开发工具控制台中显示的内容。

当我学习 Webpack 时，我发现在 https://webpack.js.org/concepts/ 阅读 entry 和 output 的概念非常有帮助，然后在 https://webpack.js.org/guides/ 做 Installation 和 Getting Started 指南。

祝你好运！

【讨论】：