Y
Y
yura_born2021-06-02 15:56:56
MySQL
yura_born, 2021-06-02 15:56:56

Why doesn't assets fire when inserting an image into html?

I'm starting to deal with webpack 5 and there was such a problem.
The problem is that when I insert a picture in the html file, then after assembly the picture is not processed and does not even appear in the final directory. Although if you work with a picture in a js file, then everything works fine. Why doesn't it work from html?<img src="./assets/img/logo.png">import logo from './assets/img/logo.png'

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 the question

In order to leave comments, you need to log in

2 answer(s)
L
luna3956, 2019-02-06
@hackyoupeople

select
    id, count(sex) as cnt
from Tab
where room=2 and sex=2
group by id
having count(sex) <= 6

D
Demian Smith, 2021-06-02
@yura_born

1:
npm i -D html-loader
2:

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

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question