网页包4未从HTML文件加载图像

出于某种原因,我的webpack配置正在加载来自SCSS文件的图像,而不是来自HTML文件的图像。另外,当我运行BUILD命令以传递我的prod归档文件时,它不会创建“img”文件夹。老实说,我对webpack 4很陌生,我想有几个步骤我没有包括在WP配置文件中。

这是我的webpack.dev.js

距离

|----img公司

|----css

a、 html格式

b、 html格式

c、 html格式

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CleanWebpackPlugin = require("clean-webpack-plugin");

module.exports = {
  entry: {
    main: "./src/js/scripts.js"
  },
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "js/[name].[hash].js"
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.scss$/,
        use: [
          "style-loader",
          MiniCssExtractPlugin.loader,
          "css-loader",
          "postcss-loader",
          "sass-loader"
        ]
      },
      {
        test: /\.(png|jpg|gif)$/,
        use: ["url-loader"]
      }
    ]
  },

  devServer: {
    port: 8080
  },

  plugins: [
    new CleanWebpackPlugin("dist", {}),
    new MiniCssExtractPlugin({
      filename: "css/style.[contenthash].css"
    }),
    new HtmlWebpackPlugin({
      template: "./src/index.html",
      inject: false,
      hash: true,
      filename: "index.html"
    }),
    new HtmlWebpackPlugin({
      template: "./src/actualitat.html",
      inject: false,
      hash: true,
      filename: "actualitat.html"
    }),
    new HtmlWebpackPlugin({
      template: "./src/projectes.html",
      inject: false,
      hash: true,
      filename: "projectes.html"
    })
  ]
};

这是im在html文件中同时加载css和js的方式:

    <link
  rel="stylesheet"
  href="<%=htmlWebpackPlugin.files.chunks.main.css %>"
/>

<script src="<%= htmlWebpackPlugin.files.chunks.main.entry %>"></script>

import "../scss/style.scss";
import "../img/searchBar-icon.png";
import "../img/townHall.png";
import "../img/icon-title.png";

更新:

我已经改变了im使用“文件加载程序”加载程序加载图像的方式:

  {
    test: /\.(png|jpg|gif)$/,
    use: {
      loader: "file-loader",
      options: {
        outputPath: "img/",
        name: "[name][hash].[ext]"
      }
    }
  }