Webpack 5 Html Webpack 插件錯誤“錯誤：子編譯失敗：”

Question

將帶有文件加載器的 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 中工作。

它將使用 hash 文件 [name].[contenthash].[ext] 在 dist 文件夾中生成 svg|png|jpe?g|gif 並將其動態注入代碼中。

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