Javascript 网页包5 Html网页包插件错误“；错误：子编译失败："；

在将带有文件加载器的html加载器添加到我的网页配置文件后，我在将所有内容捆绑在一起时出错

我在template.html文件中有一个img标记

它一直在说“元素“img”上的属性“src”的值不好：必须是非空的”，但正如您所看到的，我在src属性中确实有值

错误

Html网页包插件：

  Error: Child compilation failed:
  Module Error (from ./node_modules/html-loader/dist/cjs.js):
  HtmlSourceError: Bad value for attribute "src" on element "img": Must   be non-empty (From line 78, column 17; to line 78, column 89)
  ModuleError: Module Error (from ./node_modules/html-loader/dist/cjs.js  ):
  HtmlSourceError: Bad value for attribute "src" on element "img": Must   be non-empty (From line 78, column 17; to line 78, column 89)
  
  - NormalModule.js:433 Object.emitError
    [PlaceFinder]/[webpack]/lib/NormalModule.js:433:6
  
  - index.js:61 Object.loader
    [PlaceFinder]/[html-loader]/dist/index.js:61:10
  
  - LoaderRunner.js:132 LOADER_EXECUTION
    [PlaceFinder]/[loader-runner]/lib/LoaderRunner.js:132:14
  
  - LoaderRunner.js:133 runSyncOrAsync
    [PlaceFinder]/[loader-runner]/lib/LoaderRunner.js:133:4
  
  - LoaderRunner.js:251 iterateNormalLoaders
    [PlaceFinder]/[loader-runner]/lib/LoaderRunner.js:251:2
  
  - LoaderRunner.js:224 Array.
    [PlaceFinder]/[loader-runner]/lib/LoaderRunner.js:224:4
  
  - CachedInputFileSystem.js:25 runCallbacks
    [PlaceFinder]/[enhanced-resolve]/lib/CachedInputFileSystem.js:25:15
  
  - CachedInputFileSystem.js:198 
    [PlaceFinder]/[enhanced-resolve]/lib/CachedInputFileSystem.js:198:4
  
  - graceful-fs.js:123 
    [PlaceFinder]/[graceful-fs]/graceful-fs.js:123:16
  
  - read_file_context.js:63 FSReqCallback.readFileAfterClose [as oncompl    ete]
    internal/fs/read_file_context.js:63:3
  
  - child-compiler.js:159 
    [PlaceFinder]/[html-webpack-plugin]/lib/child-compiler.js:159:18
  
  - Compiler.js:511 
    [PlaceFinder]/[webpack]/lib/Compiler.js:511:11
  
  - Compiler.js:1059 
    [PlaceFinder]/[webpack]/lib/Compiler.js:1059:17
  
  
  - Hook.js:18 Hook.CALL_ASYNC_DELEGATE [as _callAsync]
    [PlaceFinder]/[tapable]/lib/Hook.js:18:14
  
  - Compiler.js:1055 
    [PlaceFinder]/[webpack]/lib/Compiler.js:1055:33
  
  - Compilation.js:2119 
    [PlaceFinder]/[webpack]/lib/Compilation.js:2119:10
  
  
  - Hook.js:18 Hook.CALL_ASYNC_DELEGATE [as _callAsync]
    [PlaceFinder]/[tapable]/lib/Hook.js:18:14
  
  - Compilation.js:2112 
    [PlaceFinder]/[webpack]/lib/Compilation.js:2112:37

我的配置文件

var HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const path = require("path");
module.exports = {
  entry: "./src/index.js",
  plugins: [new CleanWebpackPlugin(), new HtmlWebpackPlugin({
    template: "./src/template.html",
    minify: false,
  })],
  module: {
    rules: [
      {
        test: /\.s?css$/i,
        use: [
          "style-loader", // Inject styles into DOM
          "css-loader", // Turns css into commonJS
          "sass-loader" // Turns sass into css
        ],
      },
      {
        test: /\.html$/i,
        use: ["html-loader"],
      },
      {
        test: /\.(svg|png|jpe?g|gif)$/i,
        loader: 'file-loader',
        options: {
          name: "[name].[ext]",
          outputhPath: "imgs"
        }
      }
    ]
  }
};

---

我目前找不到解决这个问题的办法。也许这里有人可以帮忙。

解决了。在应用程序中，我有一个没有值的img src

<img alt="" class="m-auto img-fluid" data-bind="attr: {src: img}">

要跳过它，从图像标记中删除src可能会有所帮助

<img alt="" class="m-auto img-fluid" data-bind="attr: {src: img}">

---

解决了。在应用程序中，我有一个没有值的img src

要跳过它，从图像标记中删除src可能会有所帮助

<img alt="" class="m-auto img-fluid" data-bind="attr: {src: img}">

---

template.html是代码库中唯一的html文件吗？html加载程序用于绑定可以导入javascript模块的html文件。如果目标只是生成用作主页的index.html，则只需要html网页包插件。@alexv yes template.html是唯一的html文件。在我的template.html中，我有一个我想要动态生成它的模板。我希望Webpack在“dist”文件夹中创建一个名为“imgs”的文件夹，并将图像代码注入到它创建的index.html文件中。所以据我所知，我需要使用html加载程序。我遵循这个指南。他当时使用的是旧版本的Webpack。template.html是您代码库中唯一的html文件吗？html加载程序用于绑定可以导入javascript模块的html文件。如果目标只是生成用作主页的index.html，则只需要html网页包插件。@alexv yes template.html是唯一的html文件。在我的template.html中，我有一个我想要动态生成它的模板。我希望Webpack在“dist”文件夹中创建一个名为“imgs”的文件夹，并将图像代码注入到它创建的index.html文件中。所以据我所知，我需要使用html加载程序。我遵循这个指南。他当时使用的是旧版本的Webpack。