Why does webpack dev-server take a long time to build a project?

Question

webpack

I set up webpack to work with the project, but when the dev server is running, any file change is saved for a very long time, every time the scss, js files are changed, the project takes 8-10 seconds (all fonts, pictures go through plugins), and I spend a lot of time, to see how the element has moved 5 pixels.
webpack.config.js:

spoiler

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const ImageminPlugin = require('imagemin-webpack-plugin').default;

module.exports = {
  entry: { main: './src/index.js' },
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "[name].[chunkhash].js"
  },
  optimization: {
    minimizer: [
      new OptimizeCSSAssetsPlugin({})
    ]
  },
  plugins: [
    new CleanWebpackPlugin('dist/*', {}),
    new MiniCssExtractPlugin({
      filename: '[name].[hash].css',
      chunkFilename: '[id].[hash].css',
    }),
    new HtmlWebpackPlugin({
      inject: false,
      hash: true,
      template: './src/index.html',
      filename: 'index.html'
    }),
    new CopyWebpackPlugin([
      { from: './src/img/', to: './img/' },
      { from: './src/fonts/', to: './fonts/' }
    ],
      {
        debug: true,
        ignore: [ '*.js', '*.css', '*.scss' ]
      }),
    new ImageminPlugin({ test: /\.(jpe?g|png|gif|svg)$/i })
  ],
  module: {
    rules: [
      {
        test: /\.(eot|svg|ttf|woff|woff2)$/,
        exclude: /node_modules/,
        loader: 'file-loader',
        options: {
          name: 'fonts/[name].[ext]'
        }
      },
      {
        test: /\.(jpe?g|png|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 1000,
              name: 'img/[name].[ext]',
            }
          }
        ]
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.scss$/,
        use: [
          MiniCssExtractPlugin.loader, // creates style nodes from JS strings
          "css-loader", // translates CSS into CommonJS
          "postcss-loader",
          "sass-loader" // compiles Sass to CSS
        ]
      },
    ]
  }
}

Project structure:

spoiler

Here you can fully see how everything is arranged: https://github.com/Fu11buster/webpack-minimal-boil... The
question is what needs to be done to improve the situation and speed up the build process.

Answer 1

Um, why run fonts and images through webpack in dev mode? Do this when building the project.
This delay is due to imgmin. It doesn't cache anything, and runs your megabytes of images through itself over and over again.