今天使用 html-withimg-loader 处理HTML中img标签图片的引入问题，出现一个问题，就是img标签引入的图片路径多出个src="{"default": "data/jpeg:base64,..."}" 等云云，抓破了脑袋都不知道问题出在哪？...

jscxjs44.png

项目结构图:

image.png

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry: './src/main.js',
    output: {
        path: path.join(__dirname, './dist/'),
        filename: 'bundle.js'
    },
    mode: 'development',
    devServer: {
        open: true,
        compress: true,
        port: 9099,
        contentBase: './src',
        hot: true
    },
    plugins: [
        new HtmlWebpackPlugin({
           filename: 'index.html',
          template: './src/index.html'
    })
   ],
    module: {
        rules: [
        {
            test: /\.css$/,
            use: ['style-loader', 'css-loader']
        },
        {
            test: /\.(jpg|jpeg|png|gif|bmp)$/,
            use: {
                loader: 'url-loader',
                options: {
                    limit: 5 * 1024,
                    outputPath: 'images',
                    name: '[name].[hash:6].[ext]'
                }
            }
        },
        {
            test: /\.(htm|html)$/,
            use: ['html-withimg-loader']
        }
      ]
    }
}

package.json

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "dwqing webpack demo",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "dev": "webpack-dev-server",
    "server": "node server.js"
  },
  "keywords": [],
  "author": "dwqing",
  "license": "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-webpack-plugin": "^3.0.0",
    "css-loader": "^3.2.0",
    "expose-loader": "^0.7.5",
    "express": "^4.17.1",
    "file-loader": "^5.0.2",
    "html-webpack-plugin": "^3.2.0",
    "html-withimg-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",
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.10",
    "webpack-dev-middleware": "^3.7.2",
    "webpack-dev-server": "^3.9.0"
  }
}

多次检查代码，好像也没发现什么问题，后来想着是不是url-loader的版本问题呢？果不其然，把"url-loader": "^3.0.0"版本改成 "url-loader": "^1.1.2"、"file-loader": "^5.0.2"版本改成"file-loader": "^3.0.1"问题就解决了!!!

image.png

记得改了版本之后把node_modules删除掉，再次运行npm install 把最新loader安装下来