Блог

Я пытаюсь настроить webpack для своего проекта (я прохожу курс colt steele webpack на YouTube https://www.youtube.com/watch?v=mnS_1lolc44 ). Но я не могу правильно настроить свои изображения, я перепробовал все и искал везде в Интернете, но не смог понять, как решить. Ниже приведена моя структура каталогов и фрагмент кода.

У меня есть три файла конфигурации webpack: webpack.common.js , webpack.dev.js и webpack.prod.js

webpack.common.js

 const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: "./src/index.js",
    plugins : [new HtmlWebpackPlugin({
        template: "./src/template.html"
    })],
    module: {
        rules: [
            {
                test: /.scss$/,
                use: ["style-loader","css-loader","sass-loader"]
            },
            {
                test: /.(png|jpe?g|gif|svg)$/i,
                use: [
                  {
                    loader: "file-loader",
                    options: {
                      name: "[name].[hash].[ext]",
                      publicPath: '/',
                      outputPath: 'img',
                      esModule: false
                    }
                  }
                ]
              },
              {
                test: /.html$/,
                use: ["html-loader"]
            }              
        ]
    }
}
 

webpack.dev.js

 const path = require('path');
const common = require('./webpack.common');
const {merge} = require('webpack-merge');

module.exports = merge(common, {
    mode: "development",
    output: {
        filename: "main.js",
        path: path.resolve(__dirname, "dist")
    }
})
 

webpack.prod.js

 const path = require('path');
const common = require('./webpack.common');
const {merge} = require('webpack-merge');

module.exports = merge(common, {
    mode: "production",
    output: {
        filename: "main.[contenthash].js",
        path: path.resolve(__dirname, "dist")
    }
})
 

Моя структура каталога src выглядит следующим образом :

Я импортирую все свои sass и другие файлы js через src/index.js файл, как показано ниже :

И я вызываю свои изображения в src/template.html файл как

Все изображения присутствуют в папке src / img и template.html файл вызывает изображения по пути как «./img/».

Когда я запускаю команду сборки npm, я получаю папку dist, созданную как :

Здесь меня смущает одна вещь, почему изображения генерируются дважды. Один внутри папки dist / img с собственным именем hashvalue extension и один внутри папки dist. Также мой сгенерированный index.html file вызывает изображения, присутствующие в папке dist (которые являются неправильными, и почему они генерируются, я не уверен), вместо вызова изображений, присутствующих в папке dist / img?

Приведенный выше скриншот сгенерированного dist/index.html досье. Здесь путь к изображению указан для изображений, созданных в папке dist, которая не является правильной.

И даже если я попытаюсь открыть эти сгенерированные изображения (присутствующие в папке dist) в VS code, я получу сообщение об ошибке «Произошла ошибка при загрузке изображения». В то время как изображения, присутствующие в папке dist / img, показывают мне правильное изображение при выборе любого из них.

Может ли кто-нибудь, пожалуйста, помочь мне понять, почему webpack генерирует два набора изображений (один правильный, а другой неправильный) и почему генерируется dist/index.html файл ищет путь к неправильным изображениям, а не к правильному.

Репозиторий GitHub: git@github.com:Guru4741/Sedna.git

Спасибо

Вы используете webpack 5, и в нем происходят большие изменения. У вас много ошибок в коде, но найдите их сами;) Еще одно замечание. Этот «node_modules» не передается на github 🙂

Хорошо, давайте разберемся, почему картинки не отображаются. Удалите библиотеку «file-loader», затем удалите эту часть кода:

 {
  test: /.(png|jpe?g|gif|svg)$/i,
  use: [{
    loader: "file-loader",
    options: {
      name: "[name].[hash].[ext]",
      publicPath: '/',
      outputPath: 'img',
      esModule: false
    }
  }]
},
 

Замените на это:

 {
  test: /.(png|jpe?g|gif|svg)$/i,
  type: 'asset/resource',
  generator: {
    filename: 'img/[name][ext]',
  },
}
 

Вы можете узнать больше об активе, посетив эту страницу asset-modules

И еще одна вещь, курс, который вы смотрите, довольно старый 2019, основы везде одинаковы, но в новом webpack 5 много изменений.