Webpack 5 Html Webpack 插件错误“错误：子编译失败：”

Question

将带有 file-loader 的 html-loader 添加到我的 Webpack 配置文件后，将所有内容捆绑在一起时出现错误。

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

它一直在说“元素“img”上属性“src”的值错误：必须非空”，但正如你所见，我确实在 src 属性中有值。

错误

HTML Webpack 插件：

  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"
        }
      }
    ]
  }
};

我目前找不到解决此问题的方法。也许这里有人可以提供帮助。

Answer 1

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

要跳过它，从图像标签中删除 src 会有所帮助。

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

以下配置现在可以在 Webpack 5 中使用。

它会生成 svg|png|jpe?g|gif 到 dist 文件夹中，带有一个散列文件 [name].[contenthash].[ext] 并动态注入到代码中。

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$/,
        loader: 'html-loader',
        options: {
          minimize: {
            caseSensitive: true,
            conservativeCollapse: true,
            keepClosingSlash: true,
            minifyCSS: true,
            minifyJS: true,
            removeComments: false,
            collapseWhitespace: false,
            removeRedundantAttributes: true,
            removeScriptTypeAttributes: true,
            removeStyleLinkTypeAttributes: true,
          },
        },
      },
      {
        test: /\.(svg|png|jpe?g|gif)$/i,
        use: {
          loader: 'file-loader',
          options: {
            name: "[name].[contenthash].[ext]",
            outputhPath: "imgs"
          }
        }
      }
    ]
  }
};