How to include webpack generated file in an HTML Page?
Question
I have a simple (traditional html,css,js) web project and I am intending to use htmldiff-js library in my project.
I tried to download the htmldiff js from the GitHub and included directly in my HTML page using script tag. htmldiff js is compiled using webpack and contains import, module etc keywords.
When I open the HTML page in the browser, it throws an error. My question is how should I include this file - https://github.com/dfoverdx/htmldiff-js/blob/master/dist/htmldiff.js in my HTML page.
I have a very slight knowledge about 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.
Sample Code
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);
});
3 answers
solution1
1 2018-12-24 00:17:41
Ok, here's an alternate answer where you don't have to learn about 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.
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 ). 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!
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.)
Good luck!
solution2
1 ACCPTED 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.
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>
If you want to use variables/functions other than HtmlDiff , expose in index.js in same fashion. 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.
solution3
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. 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.
Then put the following line at the top of your JavaScript source file (eg, ./src/index.js ): import HtmlDiff from 'htmldiff-js'; (from 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' . For example, consider writing console.log(HtmlDiff) immediately after that line of code to see what appears in your browser's dev tools console.
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/ .
Good luck!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.