@yura_born

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

Начинаю разбираться с 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),
});
  • Вопрос задан
  • 26 просмотров
Решения вопроса 1
search
@search
мама говорит что я особенный
1:
npm i -D html-loader

2:
{
  test: /\.html$/,
  use: ["html-loader"],
},
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы