如何使用webpack來要求帶有內聯CSS，JS和PNG的HTML文檔

Question

我的模板文件夾充滿了任意的css / html / js / image文件。 我希望能夠通過require訪問它們：

var someHtml = require('./templateFolder/foo.html');

在這里， foo.html包含對foo.png ， foo.css和foo.js ，我希望它們都分別以foo.png編碼，樣式標簽和腳本標簽內聯在html文檔本身中。 這可能嗎？ 如果是這樣，Webpack配置將是什么樣？

編輯：進一步的上下文

我要這個

<html>
  <head>
      <link rel="stylesheet" type="text/css" href="foo.css">
      <script type="text/javascript" src="bar.js"></script>
  </head>
  <body>
  </body
</html>

變成這樣：

<html>
  <head>
      <style> Contents of foo.css </style>
      <script> Contents of bar.js</script>
  </head>
  <body>
  </body
</html>

換句話說，我希望將每個html文件及其所有資源轉換為單個html文件。 對於html文件的外觀，我不一定有很多控制權。

Answer 1

看來您可以為用例使用html-loader for webpack： https : //github.com/webpack-contrib/html-loader

一個樣本webpack.config文件將包括：

module: {
  rules: [{
    test: /\.html$/,
    use: [ {
      loader: 'html-loader',
      options: {
        minimize: true
      }
    }],
  }]
}

然后，您應該可以使用require("html-loader!./file.html");來獲取所需的html文件require("html-loader!./file.html");

有關更多信息，請查看上面的鏈接！

編輯：例如，要自動內聯圖像，可以使用attrs參數：

默認情況下，每個本地都是必需的（require（'./ image.png'））。 您可能需要為配置中的圖像指定加載程序（推薦的文件加載程序或url加載程序）。

您可以通過查詢參數attrs來指定此加載程序應處理哪個標簽屬性組合。 傳遞數組：或以空格分隔的：組合列表。 （預設值：attrs = img：src）

編輯：要對樣式表鏈接和js執行相同操作，可以使用https://www.npmjs.com/package/html-inline-source-webpack-plugin

如何使用webpack來要求帶有內聯CSS，JS和PNG的HTML文檔

問題描述

1 個解決方案

解決方案1
0 2017-10-10 14:34:49

如何使用webpack來要求帶有內聯CSS，JS和PNG的HTML文檔

問題描述

1 個解決方案

解決方案1 0 2017-10-10 14:34:49

解決方案1
0 2017-10-10 14:34:49