今天，我们正在使用HTML-withimg-loader处理html img标签图像的部署问题。 一个问题是，在引入img标签的图像路径中添加了src=' { ' default ' : ' data/JPEG 3360 base 64， ' }等云.
jscxjs44.png
项目结构图：
image.png
web包. config.js
常数路径=require (' path )；
consthtmlwebpackplugin=require (html-web pack-plugin )；
module.exports={
entry: './src/main.js '，
output: {
path:path.join(__dirname，'./dist/' )、
filename: 'bundle.js '
(，
模式： '开发'，
devServer: {
open: true，
Compress :真，
端口： 9099，
内容基础： './src '，
热：真
(，
plugins: [
new HtmlWebpackPlugin({ (
filename: 'index.html '，
template: './src/index.html '
() )
]、
模块： {
rules: [
{
test: /.css$/，
use: ['style-loader '，' css-loader']
(，
{
test 3360/.(jpg ) $/，
use: {
loader: 'url-loader '，
选项： {
limit: 5 * 1024、
outputPath: 'images '，
name : ' [ name ].[ hash :6 ].[ ext ] '
}
}
(，
{
test3360//(htm|html ) $/，
use : [ ' html-with img-loader ' ]
}
]
}
}
package.json
{
' name ' : ' web包- demo '，
'版本' : '1.0.0'，
'描述' : ' dwqingwebpackdemo '，
' main': 'index.js '，
'脚本' : {
' test ' : ' echo' error : notest specified' exit1'，
' build ' : ' web包'，
' dev ' : ' web包- dev-server '，
' server': 'node server.js '
(，
' keywords': []，
' author': 'dwqing '，
'许可证' : ' Isc '，
' devDependencies': {
' @babel/core': '^7.7.4'，
' @ babel/plugin-proposal-class-properties ' : ' ^7.7.4'，
' @babel/preset-env': '^7.7.4'，
' babel-loader': '^8.0.6'，
' clean-web包插件' : ' ^3.0.0'，
' css-loader': '^3.2.0'，
' expose-loader': '^0.7.5'，
' express': '^4.17.1 '，
'文件加载器' : ' ^5.0.2'，
' html-web包插件' : ' ^3.2.0'，
' html-with img-loader ' : ' ^0.1. 16 '，
' less': '^3.10.3 '，
' less-loader': '^5.0.0'，
' node-sass': '^4.13.0 '，
' sass-loader': '^8.0.0'，
' style-loader': '^1.0.1'，
' url-loader': '^3.0.0'，
' web包' : ' ^4. 41.2 '，
' web包- CLI ' : ' ^3.3. 10 '，
' web包- dev-middleware ' : ' ^3.7.2'，
'网络包- dev-server ' : ' ^3.9.0'
}
}
我检查了很多次代码，但似乎没有发现任何问题，我后来想这是不是url-loader的版本问题。 果然，将' url-loader': '^3.0.0'版本改为' url-loader': '^1.1.2'，'文件加载器' 3360 ' ^ 5.0 ' ！
image.png
在更改版本后，请记住删除node_modules，然后重新运行npm install以安装最新的加载程序