Webpack 4和Pug不显示图像

问题描述

我在配置webpack和pug时遇到问题。图片未显示（出现404错误）

这是：webpack.common.js

const path = require("path");
    const HtmlWebpackPlugin = require("html-webpack-plugin");
    const { CleanWebpackPlugin } = require("clean-webpack-plugin");
    const __ROOT__ = process.cwd();
    
    const fs = require("fs");
    
let templates = [];
let dir = "src";
let files = fs.readdirsync(dir);

files.forEach((file) => {
  if (file.match(/\.pug$/)) {
    let filename = file.substring(0,file.length - 4);
    templates.push(
      new HtmlWebpackPlugin({
        template: dir + "/" + filename + ".pug",filename: filename + ".html",hash: true,})
    );
  }
});

module.exports = {
  entry: path.resolve(__ROOT__,"src/js/index.js"),output: {
    path: path.resolve(__ROOT__,"build"),filename: "js/[name].bundle.js",chunkFilename: "js/[name].chunk.js",},plugins: [new CleanWebpackPlugin(),...templates],module: {
    rules: [
      {
        test: /\.pug$/,use: [
          { loader: "raw-loader" },{
            loader: "pug-html-loader",options: {
              pretty: true,],{
        test: /\.js$/,exclude: /(node_modules)/,use: {
          loader: "babel-loader",options: {
            cacheDirectory: true,configFile: path.resolve(__ROOT__,"config/babel.config.js"),{
        test: /\.(?:ico|gif|png|jpg|jpeg|webp|svg)$/i,loader: "file-loader",options: {
          name: "[path][name].[ext]",context: "src",// prevent display of src/ in filename
        },};

下一个文件webpack.dev.js：

const {
  merge
} = require("webpack-merge");
const commonConfig = require("./webpack.config.common");

module.exports = merge(commonConfig,{
  mode: "development",devtool: "inline-source-map",devServer: {
    contentBase: "./build",compress: true,port: 3001,overlay: true,module: {
    rules: [{
      test: /\.css$/,use: ["style-loader","css-loader"],rules: [{
      test: /\.s[ac]ss$/,"css-loader","sass-loader"],});

最后是pug索引页：我尝试使用倍数url，但都不起作用。

html
  head
    title Webpack 4

  body
    h1 Project starter

    hr
    
    img(src='images/logo.png')
    img(src='./images/logo.png')
    img(src='../images/logo.png')
    img(src='../../images/logo.png')

解决方法

我替换以下行：

rules: [
      {
        test: /\.pug$/,use: [
          { loader: "raw-loader" },{
            loader: "pug-html-loader",options: {
              pretty: true,},],

使用此行并可以正常工作：

rules: [{
        test: /\.pug$/,use: [{
            loader: "html-loader",