如何使用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