html-loader 未获取正确的 img src 路径
Miz*_*k.H 3 javascript webpack
（问题解决了！）
我正在尝试使用html-loader并file-loader打包index.html img标签src属性中提到的图像源。
但它不起作用，因为img标签src没有引用正确的路径。
只是想知道我的配置有什么问题吗？
我的webpack配置：
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
entry: {
main: ['./src/index.js', './src/scss/main.scss'],
},
output: {
filename: '[name].js',
chunkFilename: '[name].min.js',
path: resolve(__dirname, 'build'),
},
mode: 'development',
module: {
rules: [
{
test: /\.html$/,
use: [
{
loader: 'html-loader',
}
],
},
{
test: /\.scss$/,
use: [
'style-loader',
'css-loader',
'sass-loader'
]
},
{
test: /\.(jpg|png|gif)$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: '/img/',
pubicPath: '/img/'
}
}
],
}
]
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
template: './index.html'
})
]
}运行后./build文件夹webpack
我的index.html
（我也尝试将img src属性更改为“./img/women.jpg”或“/img/women.jpg”或“img/women.jpg”，但没有任何作用，只是使webpack编译错误.. ）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img src="./src/img/women.jpg" alt="">
</body>
</html>内置index.html文件./build夹（这是什么620b11833eb3b1be1f33.jpg？）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script defer src="main.js"></script></head>
<body>
<img src="620b11833eb3b1be1f33.jpg" alt="">
</body>
</html>最后我找到了解决方案。
我猜这个错误是由@Daweed 在最上面的评论中提到的问题引起的。
我正在使用 webpack 5，但没有注意到 file-loader/url-loader/raw-loader 现在已被弃用。
解决方案是从 dev-dependency 中卸载 file-loader/url-loader/raw-loader（并记住还要删除所有相关的配置设置。），然后按照此处的指南进行操作。
我现在的配置设置（解决了所有问题）如下：
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
entry: {
main: ['./src/index.js', './src/scss/main.scss'],
},
output: {
filename: '[name].js',
chunkFilename: '[name].min.js',
path: resolve(__dirname, 'build'),
},
mode: 'development',
module: {
rules: [
{
test: /\.html$/,
use: [
{
loader: 'html-loader',
}
],
},
{
test: /\.scss$/,
use: [
'style-loader',
'css-loader',
'sass-loader'
]
},
{
test: /\.(jpe?g|png|gif)$/,
type: 'asset/resource',
generator: {
filename: 'img/[hash][ext]'
}
}
]
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
template: './index.html'
})
]
}| 归档时间： |
|
| 查看次数： |
3508 次 |
| 最近记录： |