Html-загрузчик + загрузчик файлов не объединяет правильный источник изображения

Я планирую использовать Webpack для проекта, и я настраиваю свой рабочий процесс с Html-loader + file-loader, чтобы получить рабочий html-файл с динамическим src для изображений, как Колт Стил учит в этом видео. Вот мои файлы src/:

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Popular on Letterboxd</title>
</head>
<body>
  <img src="./assets/chira.jpg" />
</body>
</html>

index.js:

import img from './assets/chira.jpg';
import "./main.css";

И main.css

body {
  background-color: darkblue;
}

Это мои файлы конфигурации (у меня есть отдельные для разработки и производства и общие для обоих):

webpack.common.js:

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

module.exports = {
  entry: './src/index.js',

  devtool: "none",
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ],
      },
      {
        test: /\.html$/,
        use: ["html-loader"]
      },
      {
        test: /\.(png|jpe?g|gif|svg)$/i,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[hash].[ext]',
              publicPath: 'assets',
              outputPath: 'assets/img'
            }
          }
        ]
      }
    ],
  },
};

webpack.dev.js:

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

module.exports = merge(common, {
  mode: "development",
  devServer: {
    contentBase: path.join(__dirname, 'src'),
  },
  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")
  },
});

Однако, когда я запускаю npm run build, которая выполняет эту команду:

"build": "webpack --config webpack.prod.js"

И я получаю ожидаемую папку dist с assets/img/[name].[Hash].[Ext], но в моем index.html я не получаю ожидаемый тег src:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Popular on Letterboxd</title>
</head>
<body>
  <img src="[object Module]" />
<script type="text/javascript" src="main.e55bd4ff82bf2f5cec90.js"></script></body>
</html>

Я уже некоторое время пытаюсь решить эту проблему, но, похоже, нигде не могу получить правильный ответ, и ничего из того, что я пробовал, пока не работает. Я был бы признателен, если бы кто-нибудь, кто столкнулся с этой проблемой, мог рассказать, как они ее исправили, или если кто-то знает, в чем проблема и что я могу сделать. Заранее спасибо!

Источник

2 ответа

Решение

Если версия загрузчика файлов 5.0, то. Эту проблему решит добавление другой опции для файлового загрузчика как "esModule: false".

{
    test: /\.(png|jpe?g|gif|svg)$/i,
    use: [
      {
        loader: 'file-loader',
        options: {
          name: '[name].[hash].[ext]',
          publicPath: 'assets',
          outputPath: 'assets/img',
          esModule: false
        }
      }
    ]
  }
Источник

Если вы используете webpack 5 или более позднюю версию, расширение не распространяется. Документация по загрузчику файлов Вы можете использовать модуль asset/resourceвместо. Удалите ваш file-loader rule и добавьте следующее правило в свой модуль в webpack.common.js

      module: {
    rules: [
        {
            test: /\.(png|jpe?g|gif|svg)$/i,
            type: 'asset/resource'
        }
    ]
},

затем добавьте assetModuleFilename в output в вашем webpack.prod.js

      output: {
    assetModuleFilename: "assets/img/[name].[hash][ext]"
}

и держи свой html-loader в файле webpack.common.js как есть.

Ссылки Активные модули

Источник
Другие вопросы по тегам