Webpack 4 не загружает изображения из файлов HTML - PullRequest
Новая
       7

Webpack 4 не загружает изображения из файлов HTML

0 голосов
/ 03 декабря 2018

По какой-то причине моя конфигурация веб-пакета загружает изображения, которые приходят из моих файлов SCSS, но не те, которые приходят из файлов HTML.Также, когда я запускаю команду BUILD для доставки моих архивов, она не создает папку «img».Если честно, я довольно новичок в Webpack 4, и я думаю, что есть пара шагов, которые я не включил в файл конфигурации WP.

Это мой webpack.dev.js

Это структура папки prod, которую я хотел бы создать:

dist

| ---- img

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

Это способ загрузки обоихcss и js в моих html-файлах: 

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

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

У меня есть js-файл scripts.js, куда я импортирую такие файлы: 

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

ОБНОВЛЕНИЕ:

Я изменил способ загрузки изображений с помощью загрузчика «file-loader»: 

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

Теперь все мои изображения копируются в папку «img», котораяхорошо, проблема в том, что все имена файлов теперь имеют хэши (что имеет смысл, поскольку я говорю загрузчику добавить их), и они не загружаются в мои html-файлы.

1 Ответ

0 голосов
/ 03 декабря 2018

Можете ли вы попробовать следующее для загрузки изображений?

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