webpack4打包html中的图片找不到图片

Question

// webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
function resolve(dir) {
  return path.join(__dirname, '..', dir);
}
module.exports = {
  mode:'production',
  // mode:'development',
  // context: path.resolve(__dirname, '../'),
  entry: {
    sensorInit:'./src/javascript/sensorInit',
    jsbridge:'./src/javascript/jsbridge',
    sensor:'./src/javascript/sensor',
    utils:'./src/javascript/utils',
    jweixin:'./src/javascript/jweixin-1.3.2',
    fastLoan:'./src/fastLoan01/fastLoan.js',
  },
  output: {
    // filename: './js/[name].[hash:7].bundle.js',//filename路径必须是path的相对路径，写绝对路径会报错
    filename: './js/[name].bundle.js',//filename路径必须是path的相对路径，写绝对路径会报错
    path: path.resolve(__dirname, 'dist'),//打包后所有的文件放在哪个文件夹
    // publicPath:'/assects/',
    // chunkFilename: '[productType].css',
  },
  resolve:{
    extensions:['.js','.vue','.json'],//引入时不带扩展名
    alias:{//配置别名
      '@':resolve('src'),
    }
  },
  module:{
    rules:[
      //css配置
      {
        test: /\.(sa|sc|c)ss$/,  // 可以打包后缀为sass/scss/css的文件
        use:[
          {
            loader:MiniCssExtractPlugin.loader,
            options:{
              // you can specify a publicPath here
              // by default it use publicPath in webpackOptions.output
              // publicPath: '../'
            }
          },
          "css-loader"
        ],
      },
      //图片配置
    {
      test:/\.(png|jpg|gif|jpeg|svg)$/,
      use:[
          {
              loader: "url-loader",
              options: {
                  name: "[name].[hash:5].[ext]",
                  limit: 1024, // size <= 1kib
                  outputPath: "images",
                  publicPath:'../images',
              }
          }
      ]
    },
    {
      test: /\.(html)$/,
      use: {
          loader: 'html-loader',
          options: {
              attrs: ['img:src', 'img:data-src', 'audio:src'],
              root: path.resolve(__dirname, '../dist'),
              minimize: true
          }
      }
    },
    ]
  },
  plugins:[
    //生成html文件
    new HtmlWebpackPlugin({
      filename:'fast.html',
      template:'fast.html',
      title:'关于',
      inject:true,//所有js注入到body底部
      chunks: ['sensorInit','jsbridge','sensor','utils','jweixin','fastLoan'],
      hash: true,
    }),
    //提取css到单独的文件
    new MiniCssExtractPlugin({
      filename:'css/[name].[hash:4].css',
      chunkFilename:'[id].css',
    }),
  ],
  
}

打包后报下面的错：

请问是哪里配置错了？

Answer 1

原因是img的src内容多出空格，html-withimg-loader不能正常找到图片，它会认为那个空格就是图片名字的一部分，解决办法就是去掉空格。。。。

Answer 2

换成./dist试试

Answer 3

    {
          loader: "url-loader",
          options: {
              name: "[name].[hash:5].[ext]",
              limit: 1024, // size <= 1kib
              outputPath: "../images",
              publicPath:'/images',
          }
      }
      

把publicPath 和 outputPath改成这样，你想打包成的目录结构应该是

    ./build
            js
                bundle.js
            images
                xxx.png
            index.html
            

outputPath 相对于的配置的output路径，是图片打包的出口，publicPath是打包后img标签src的根级路径