[英]Webpack 5 Html Webpack Plugin error “Error: Child compilation failed:”
After adding html-loader with file-loader to my Webpack configuration file I get an error bundling everything together.将带有文件加载器的 html-loader 添加到我的 Webpack 配置文件后,将所有内容捆绑在一起时出现错误。
I have an img tag in the template.html file.我在 template.html 文件中有一个 img 标签。
It keep saying "Bad value for attribute "src" on element "img": Must be non-empty" but as you can see I do have value in the src attribute.它一直说“元素“img”上的属性“src”的值错误:必须非空” ,但正如你所见,我确实在 src 属性中有值。
Error错误
Html Webpack Plugin: 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
My configuration file我的配置文件
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"
}
}
]
}
};
I can't find a way at the moment to solve this problem.我目前找不到解决此问题的方法。 Maybe someone here can help.也许这里有人可以提供帮助。
Solved.解决了。 In the app I had an img src with no value.在应用程序中,我有一个没有价值的 img src。
To skip it remove the src from the image tag can help.要跳过它,从图像标签中删除 src 会有所帮助。
<img alt="" class="m-auto img-fluid" data-bind="attr: {src: img}">
The following configuration is now working in Webpack 5.以下配置现在在 Webpack 5 中工作。
It will generate svg|png|jpe?g|gif into the dist folder with an hash file [name].[contenthash].[ext] and dynamically inject it into the code.它将使用 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"
}
}
}
]
}
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.