打包后img中src值的问题

[siguang1983]

html中 img src="images/img.jpg" alt=""
编译后结果
img src="{"default":"images/cceba3bc9c3a59cc3e8fffa8959907f1.jpg"}" alt=""

1、使用版本0.1.16
2、wepcck.config.js配置
module:{
rules: [
{
test: /.(htm|html)$/i,
loader: 'html-withimg-loader'
}
]
}

[siguang1983]

webpack.config.js

const webpack = require('webpack')
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const optimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')
const basePath = path.resolve(__dirname, 'src');
const buildPath = path.resolve(__dirname, 'build');

module.exports = {
entry: {
index: path.resolve(basePath, 'js/index.js'),
list: path.resolve(basePath, 'js/list.js'),
},

output: {
filename: '[name].js',
path: buildPath
},

module: {
rules: [
{
test: /.js$/,
use:{
loader: "babel-loader",
options: {
presets: ['@babel/preset-env'],
plugins: ['@babel/plugin-proposal-class-properties']
},
},
exclude: /node_modules/,
},
{
test: /.js$/,
use: {
loader: "eslint-loader",
options: {
enforce: 'pre'
}
},
exclude: /node_modules/,
},

  // 处理css文件
  {
    test: /\.css$/,
    use: [
      {
        loader: MiniCssExtractPlugin.loader,
        options: {
          publicPath: '',
          hmr: process.env.NODE_ENV === 'development',
        },
      },
      'css-loader',
      'postcss-loader',
    ]
  },
  {    
    test:/\.(jpg|png|svg|gif)/,    
    use:[{      
      loader:'file-loader',      
      options:{        
        outputPath: './images/',
      }
    }]
  },
  {
    test: /\.(htm|html)$/i,
    loader: 'html-withimg-loader'
  },
]

},

plugins: [
new CleanWebpackPlugin(),
new webpack.HotModuleReplacementPlugin(),
new HtmlWebpackPlugin({
title: '首页',
template: ${basePath}/index.html,
filename: index.html
}),
new HtmlWebpackPlugin({
title: '列表页',
template: ${basePath}/list.html,
filename: list.html
}),
new MiniCssExtractPlugin({
filename: '[name].css',
chunkFilename: '[id].css',
}),
new webpack.ProvidePlugin({
'$': "jquery",
'@': basePath
})
],

optimization: {
minimizer: [
new UglifyJsPlugin({
sourceMap: true,
}),
new optimizeCssAssetsWebpackPlugin()
]
},

devServer: {
port: 3000,
contentBase: './build',
hot: true,
// open: true,
inline: true,
compress: true,
progress: true,
proxy: {
'/api/*': {
target: 'http://wwww.we.com',
pathRewrite: {
'^/api/': '/'
},
changeOrigin: true,
secure: false
}
},
historyApiFallback:{
rewrites:[
{
from: /./,
to: '404.html'
}
]
}
}
}

[ifer-itcast]

添加 esModule: false 即可，如下

rules: [
    {
        test: /\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
        // 小于等于 limit 大小的图片会被转为 base64
        use: [{
            loader: 'url-loader?limit=272359',
            options: {
                esModule: false
            }
        }],
        test: /\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
    },
]