Почему не срабатывает assets при вставке картинки в html?

Question

[yura_born]

Начинаю разбираться с webpack 5 и возникла такая проблема.
Проблема заключается в том что когда в html файле я вставляю картинку <img src="./assets/img/logo.png"> то после сборки картинка не как не обрабатывается и в конечной директории даже не появляется. Хотя если работать с картинкой в js файле import logo from './assets/img/logo.png'то всё прекрасно работает. Почему из html не работает?

module.exports = ({ development }) => ({
  mode: development ? 'development' : 'production',
  devtool: development ? 'inline-source-map' : false,
  entry: {
    main: './src/index.ts',
  },
  output: {
    filename: '[name].[contenthash].js', // начало имени берется из ключа точки входа
    path: path.resolve(__dirname, 'dist'),
    assetModuleFilename: 'assets/[hash][ext]',
  },
  module: {
    rules: [
      {
        test: /\.[tj]s$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
      {
        test: /\.(?:ico|gif|png|jpg|jpeg|svg)$/i,
        type: 'asset/resource',
      },
      {
        test: /\.(woff(2)?|eot|ttf|otf)$/i,
        type: 'asset/resource',
      },
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
      },
      {
        test: /\.s[ac]ss$/i,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
      },
    ],
  },
  plugins: [
    ...esLintPlugin(development),
    new MiniCssExtractPlugin({ filename: '[name].[contenthash].css' }),
    new HtmlWebpackPlugin({ title: 'Race' }),
    new CopyPlugin({
      patterns: [
        { from: './public' }, // неизменяемые файлы из папки public попадут в корень dist
      ], // если папка public пустая build выдаст ошибку
    }),
    new CleanWebpackPlugin({ cleanStaleWebpackAssets: false }), // удаляет папку dist
  ],
  resolve: {
    extensions: ['.ts', '.js'],
  },
  ...devServer(development),
});

Answer 1

[Demian Smith]

1:
npm i -D html-loader

2:

{
  test: /\.html$/,
  use: ["html-loader"],
},

Comments

[yura_born]

Действительно так сработало, получается assets только для js.... Спасибо за помощь!

[yura_born]

Может еще подскажите почему dev-server не перезагружает автоматически страницу, когда вносишь изменения в html

const devServer = (isDev) => !isDev ? {} : {
  devServer: {
    open: true,
    hot: true,
    port: 8080,
    contentBase: path.join(__dirname, 'public'),
  },
};

Когда убираю hot: true тогда перезагружает....

[yura_born]

Переписал вот так:

const devServer = (isDev) => !isDev ? {} : {
  devServer: {
    open: true,
    hot: true,
    port: 8080,
    // contentBase: path.join(__dirname, 'public'),
    watchContentBase: true,
  },
};

вроде пока работает :-)))

[Demian Smith]

Там у вас с папкой public какая-то заморочка получилось. Она зачем-то копируется куда-то. Можно обойтись без этого. Я на этой неделе эксперементировал с конфигурацией вебпака и в итоге пришел вот к такой штуке: https://github.com/sneas/web-component-typescript-... . Это не 100% то что вы пытаетесь достичь, но там присутствует идея, почёрпнутая из проекта create-react-app:

1. Шаблон HTML и всякие картинки, которые используются в HTML, но не в JS (например, favicon.ico) хранятся в папке public и о них заботится HtmlWebpackPlugin: https://github.com/sneas/web-component-typescript-...
2. JS не подключается в HTML напрямую (https://github.com/sneas/web-component-typescript-...). О подключении JS тоже заботится HtmlWebpackPlugin

[Demian Smith]

Demian Smith, в итоге всё бандлится в dist как надо. И с html и с ассетами.

[yura_born]

Demian Smith, спасибо