如何在HTML页面中包含webpack生成的文件？
[英]How to include webpack generated file in an HTML Page?
问题描述
I have a simple (traditional html,css,js) web project and I am intending to use htmldiff-js library in my project. 
我有一个简单的（传统html，css，js）Web项目，并且打算在我的项目中使用htmldiff-js库 。
I tried to download the htmldiff js from the GitHub and included directly in my HTML page using script tag. 我试图从GitHub下载htmldiff js，并使用script标签将其直接包含在HTML页面中。 htmldiff js is compiled using webpack and contains import, module etc keywords. htmldiff js是使用webpack编译的，包含import，module等关键字。
When I open the HTML page in the browser, it throws an error. 当我在浏览器中打开HTML页面时，它将引发错误。 My question is how should I include this file - https://github.com/dfoverdx/htmldiff-js/blob/master/dist/htmldiff.js in my HTML page. 我的问题是我应如何在我的HTML页面中包含此文件-https://github.com/dfoverdx/htmldiff-js/blob/master/dist/htmldiff.js 。
I have a very slight knowledge about webpack. 我对webpack有一点了解。 I am not very sure about the correct solution here. 我不太确定这里的正确解决方案。 I am going to read webpack in more details now but any pointers could be very helpful. 我现在将更详细地阅读webpack，但是任何指针都将非常有帮助。
Sample Code 样例代码
index.html 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 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);
});
3 个解决方案
解决方案1
1 2018-12-24 00:17:41
Ok, here's an alternate answer where you don't have to learn about Webpack. 好的，这是一个替代答案，您无需了解Webpack。
If you change the webpack.config.js line 16 from commonjs2 to umd , then run npm run build , you will get a ./dist/htmldiff.js and ./dist/htmldiff.min.js that you can use to bring into your index.html via a <script src="..."></script> tag. 如果将webpack.config.js第16行从commonjs2为umd ，然后运行npm run build ，则会得到一个./dist/htmldiff.js和./dist/htmldiff.min.js ，您可以将它们引入通过<script src="..."></script>标记访问index.html 。
I even uploaded the output to a gist here and confirmed the demo code on the library's README is mostly working (pending some small changes I made in a pull request ). 我什至将输出上传到这里的要点，并确认库的README上的演示代码可以正常工作（ 在pull请求中所做的一些小更改之前）。 Just remove the import statement on line 39 in the example and use HtmlDiff.default.execute(...) instead of HtmlDiff.execute(...) on line 46 , and you'll be good to go! 只需删除示例中第39行上的import语句，然后使用HtmlDiff.default.execute(...)而不是第46行上的HtmlDiff.execute(...) ，您就可以开始了！
Here's what the example in the README looks like when everything is working correctly. 当一切正常运行时，这是自述文件中的示例。 (Note that the third line shows you the HTML diff.) （请注意，第三行显示了HTML差异。）
Good luck! 祝好运！
解决方案2
1 已采纳 2018-12-24 05:45:58
You may create a simple webpack project with an entry file which imports the htmldiff-js module and exposes on window , so you may access it from anywhere. 您可以使用入口文件创建一个简单的webpack项目，该项目会导入htmldiff-js模块并在window公开，因此您可以从任何地方访问它。
index.js index.js
import HtmlDiff from 'htmldiff-js';
window.HtmlDiff = HtmlDiff;
webpack.config.js 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 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 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>
If you want to use variables/functions other than HtmlDiff , expose in index.js in same fashion. 如果要使用HtmlDiff以外的变量/函数，请以相同的方式在index.js中公开。 It somewhat defeats the purpose of modular coding but your use-case should be achieved. 它在某种程度上违背了模块化编码的目的，但是应该实现您的用例。
This is the generic strategy you may follow for other node modules too. 这也是其他节点模块可能遵循的通用策略。
解决方案3
0 2018-12-23 06:50:37
[EDIT] You probably don't want to use the suggestion I've listed here, because I realized that you are probably not trying to learn Webpack right now. [编辑]您可能不想使用我在这里列出的建议，因为我意识到您现在可能不打算学习Webpack。 I'll still leave it here for anybody else who ends up finding it beneficial, but it is likely overly complicated for what you're trying to do. 我仍然将它留给最终发现它有用的任何人，但是对于您尝试做的事情来说，它可能过于复杂。
If you're going down the line of using Webpack yourself, first, run npm install htmldiff-js from anywhere within your project directory. 如果您要亲自使用Webpack，请首先从项目目录中的任何位置运行npm install htmldiff-js 。
Then put the following line at the top of your JavaScript source file (eg, ./src/index.js ): import HtmlDiff from 'htmldiff-js'; 然后将以下行放在JavaScript源文件（例如./src/index.js ）的顶部： import HtmlDiff from 'htmldiff-js'; (from https://github.com/dfoverdx/htmldiff-js#javascript ) （来自https://github.com/dfoverdx/htmldiff-js#javascript ）
You will be able to use the variable called HtmlDiff from any file that you have already written import HtmlDiff from 'htmldiff-js' . 您将可以从已编写的任何文件中使用名为HtmlDiff的变量， import HtmlDiff from 'htmldiff-js' 。 For example, consider writing console.log(HtmlDiff) immediately after that line of code to see what appears in your browser's dev tools console. 例如，考虑在该行代码之后立即编写console.log(HtmlDiff) ，以查看浏览器的开发工具控制台中显示的内容。
When I was learning Webpack, I found it very helpful to read about the concept of entry and output at https://webpack.js.org/concepts/ , then to do the Installation and Getting Started guides at https://webpack.js.org/guides/ . 在学习Webpack时，我发现在https://webpack.js.org/concepts/上阅读有关entry和output的概念非常有帮助，然后在https：// webpack上进行《 Installation和Getting Started 。 js.org/guides/ 。
Good luck! 祝好运！
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.