Question

我有充满任意css / html / js /图像文件的模板文件夹。我希望能够通过require访问它们：

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

此处，foo.html包含对foo.png，foo.css和foo.js的引用，我希望它们全部内嵌在html文档本身，base64编码，样式标记中，和脚本标签。这可能吗？如果是这样，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用于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文件

有关更多信息，请查看上面的链接！

编辑：例如，要自动内嵌图像，您可以使用attrs参数：

默认情况下，每个本地都是必需的（require（'。/ image.png'））。您可能需要为配置中的图像指定加载器（推荐的文件加载器或url-loader）。

您可以通过查询参数attrs指定此加载器应处理哪个标记属性组合。传递一个数组或以空格分隔的列表：组合。（默认值：attrs = img：src）

编辑：要对样式表链接和js执行相同操作，可以使用https://www.npmjs.com/package/html-inline-source-webpack-plugin

如何使用webpack能够要求带有内联CSS，JS和PNG的HTML文档

1 个答案: