如何在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