如何將 CSS 和 js 文件捆綁到一個 HTML 文件中？

Question

有沒有辦法webpack可以處理我的 HTML 標簽，例如

<link rel="stylesheet" href="./style.css">
<script src="./script.js"></script>

並將它們捆綁成

<style>
  //contents of minified style.css 
</style>
<script>
  //bundled and minified script.js
</script>

所以我可以從我的服務器提供單個文件？ 我設法用Processhtml grunt 插件做到了這一點，但我沒有在這個項目中使用 grunt 作為構建系統。

Answer 1

您可以使用webpack實現此目的; extract-text-webpack-plugin，html-webpack-plugin和UglifyJsPlugin如果你想在捆綁過程中想要uglify，那么還有uglify加載器，因為插件在創建bundle之后會執行uglify。

Answer 2

html-webpack-inline-source-plugin應該是你要找的。 這是一個插件html-webpack-plugin這本身就是一個插件webpack 。 所以基本上可以作為 webpack 插件的插件。 github 頁面顯示了一個非常簡單的示例，說明如何准確地執行您正在尋找的操作。