Webpack 4 不从 HTML 文件加载图像

Question

由于某种原因，我的 webpack 配置正在加载来自我的 SCSS 文件的图像，而不是来自 HTML 文件的图像。此外，当我运行 BUILD 命令以交付我的产品档案时，它不会创建“img”文件夹。老实说，我对 webpack 4 还很陌生，我想有几个步骤我没有包含在 WP 配置文件中。

这是我的 webpack.dev.js

这是我要创建的 prod 文件夹结构：

距离

|----图片

|----css

|----js

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"
    })
  ]
};

这是我在我的 html 文件上同时加载 css 和 js 的方式：

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

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

我有一个“scripts.js”js 文件，我在其中导入如下文件：

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

更新：

我已经改变了使用“文件加载器”加载器加载图像的方式：

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

现在我所有的图像都被复制到“img”文件夹中，这很好，问题是所有文件的名称现在都有散列（这是有道理的，因为我告诉加载器添加它们）并且它们'没有加载到我的 html 文件中。

Answer 1

您可以尝试以下方法来加载图像吗？

{
  test: /\.(jpe?g|png|gif|ico)$/i,
  use: ["file-loader?name=[name].[hash].[ext]"]
}