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

Question

我有一个简单的（传统html，css，js）Web项目，并且打算在我的项目中使用htmldiff-js库。

我试图从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);
});

Answer 1

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

如果将webpack.config.js第16行从commonjs2为umd ，然后运行npm run build ，则会得到一个./dist/htmldiff.js和./dist/htmldiff.min.js ，您可以将它们引入通过<script src="..."></script>标记访问index.html 。

我什至将输出上传到这里的要点，并确认库的README上的演示代码可以正常工作（在pull请求中所做的一些小更改之前）。 只需删除示例中第39行上的import语句，然后使用HtmlDiff.default.execute(...)而不是第46行上的HtmlDiff.execute(...) ，您就可以开始了！

当一切正常运行时，这是自述文件中的示例。 （请注意，第三行显示了HTML差异。）

祝好运！

Answer 2

您可以使用入口文件创建一个简单的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中公开。 它在某种程度上违背了模块化编码的目的，但是应该实现您的用例。

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

Answer 3

[编辑]您可能不想使用我在这里列出的建议，因为我意识到您现在可能不打算学习Webpack。 我仍然将它留给最终发现它有用的任何人，但是对于您尝试做的事情来说，它可能过于复杂。

如果您要亲自使用Webpack，请首先从项目目录中的任何位置运行npm install htmldiff-js 。

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

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

在学习Webpack时，我发现在https://webpack.js.org/concepts/上阅读有关entry和output的概念非常有帮助，然后在https：// webpack上进行《 Installation和Getting Started 。 js.org/guides/ 。

祝好运！

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

问题描述

样例代码

index.html

main.js

3 个解决方案

解决方案1
1 2018-12-24 00:17:41

解决方案2
1 已采纳 2018-12-24 05:45:58

解决方案3
0 2018-12-23 06:50:37

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

问题描述

样例代码

index.html

main.js

3 个解决方案

解决方案1 1 2018-12-24 00:17:41

解决方案2 1 已采纳 2018-12-24 05:45:58

解决方案3 0 2018-12-23 06:50:37

解决方案1
1 2018-12-24 00:17:41

解决方案2
1 已采纳 2018-12-24 05:45:58

解决方案3
0 2018-12-23 06:50:37