Webpack front end optimization problem?

Question

React

Plugins when starting mod opt.

optimization: {
          minimize: true,
          minimizer: [new TerserPlugin()],
      },
   plugins: [
      new HtmlWebpackPlugin({
          template: './public/index.html'
      }),
      new MiniCssExtractPlugin({
          filename: '[name].css',
          chunkFilename: '[id].css'
      }),
      new WebpackBar(),
      new ImageminPlugin({
          pngquant: {
              quality: '95-100'
          }
      }),
      new OptimizeCSSAssetsPlugin({})

Hash: 894d1fadd4f9196e3b1b
Version: webpack 4.43.0
Time: 63755ms
Built at: 2020-06-07 18:12:03
               Asset       Size  Chunks                    Chunk Names
           front.css     10 MiB       0  [emitted]  [big]  front
            front.js   7.71 MiB       0  [emitted]  [big]  front
front.js.LICENSE.txt   1.44 KiB          [emitted]
          index.html  406 bytes          [emitted]
Entrypoint front [big] = front.css front.js

Console output. After running webpack in optimization mode. What am I doing wrong? In the project, in addition to react 1.5 dependencies. Well, pictures for 15 mb.

Answer 1

https://webpack.js.org/loaders/url-loader/
url-loader alone is better not to use, because it inline everything in base64.
Install an additional file-loader, add the limit: 10000 parameter to the url-loader options, so that assets above 10kb are taken out as physical files.