Image optimization in webpack, how to set it up?

Question

JavaScript

I recently started working with vue, and this is the kind of "plug" I get, when building, I want all the images from the source folder to the folder with the assembled bundle to be shifted and minified. But the strangest thing is that for some reason only one photo is minified and transferred. Please help, otherwise I've been worrying for the second day and I can't understand.
webpack config

var path = require('path')
var webpack = require('webpack')

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js'
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
            // Since sass-loader (weirdly) has SCSS as its default parse mode, we map
            // the "scss" and "sass" values for the lang attribute to the right configs here.
            // other preprocessors should work out of the box, no loader config like this necessary.
            'scss': 'vue-style-loader!css-loader!sass-loader',
            'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax'
          }
          // other vue-loader options go here
        }
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.(png|jpe?g|gif|svg|eot|ttf|woff|woff2)$/,
      loaders: [
        {
          loader: 'file-loader',
          options: {
            name: 'images/[name].[ext]',
          }
        },
        'img-loader'
      ]

      }
    ]
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  },
  devServer: {
    historyApiFallback: true,
    noInfo: true
  },
  performance: {
    hints: false
  },
  devtool: '#eval-source-map'
}

if (process.env.NODE_ENV === 'production') {
  module.exports.devtool = '#source-map'
  // http://vue-loader.vuejs.org/en/workflow/production.html
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      beautify: false,
      comments: false,
      compress: {
      sequences     : true,
      booleans      : true,
      loops         : true,
      unused      : true,
      warnings    : false,
      drop_console: true,
      unsafe      : true
      }
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  ])
}

package.json

{
  "name": "***",
  "description": "A Vue.js project",
  "version": "1.0.0",
  "author": "***",
  "private": true,
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
  },
  "dependencies": {
    "vue": "^2.3.3",
    "vue-router": "^2.5.3"
  },
  "devDependencies": {
    "babel-core": "^6.0.0",
    "babel-loader": "^6.0.0",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-env": "^1.5.1",
    "babel-preset-stage-2": "^6.24.1",
    "cross-env": "^3.0.0",
    "css-loader": "^0.25.0",
    "file-loader": "^0.9.0",
    "img-loader": "^2.0.0",
    "node-sass": "^4.5.0",
    "sass-loader": "^5.0.1",
    "vue-loader": "^12.1.0",
    "vue-template-compiler": "^2.3.3",
    "webpack": "^2.6.1",
    "webpack-dev-server": "^2.4.5"
  }
}

Answer 1

For him to catch the pictures you need to require