Webpackでhtmlに使われている画像を別のフォルダにコピーしたい

普通のコーポレートサイトやLPでWebpack使ってみたところ、
SCSS内で使ってる画像は、file-loaderやurl-loaderで書き出せるが、
html内で使ってる画像の書き出し方法がわからず、画像の管理が半端になってしまいました。

###srcフォルダにscss、js、imgを管理したいのですが、html内で使われている画像の書き出し方法がわからず困ってます。

sample/
├─ docs/
│   ├─ index.html                 トップページ
│   ├─ img/                       htmlで使ってる画像
│   ├─ dist/                      ビルド後のファイルが書き出される場所
│
├─ src/
│   ├─ img/                       cssで使ってる画像
│   │
│   ├─ js/
│   │  ├─ common.js               すべてのJSをまとめてるファイル
│   │
│   ├─ scss/
│      ├─ common.scss             すべてのscssファイルをまとめてるファイル
│      ├─ index.scss              ページ用
│      
├─ .babelrc
├─ .eslintrc.js
├─ package.json
├─ webpack.config.js              SCSSとJSのビルド設定

import webpack from 'webpack';
import path    from 'path';
import glob    from 'glob';
import ExtractTextPlugin from 'extract-text-webpack-plugin';
import autoprefixer from 'autoprefixer';
import precss from 'precss';

//scssファイルのエントリー設定
const scssBasePath = path.resolve(__dirname, 'src/scss/');
const scssTargets = glob.sync(`${scssBasePath}/[^_*]*.scss`);
const scssEntries = {};
scssTargets.forEach(value => {
  const re = new RegExp(`${scssBasePath}/`);
  const key = value.replace(re, '').replace('.scss', '');;
  scssEntries[key] = value;
});

//JSファイルのエントリー設定
const jsBasePath = path.resolve(__dirname, 'src/js/');
const jsTargets = glob.sync(`${jsBasePath}/[^_*]*.js`);
const jsEntries = {};
jsTargets.forEach(value => {
  const re = new RegExp(`${jsBasePath}/`);
  const key = value.replace(re, '').replace('.js', '');
  jsEntries[key] = value;
});


export default [
  {
    // ========================================================
    // CSS
    // ========================================================
    entry: scssEntries,
    output: {
      path: path.resolve(__dirname, 'docs/dist/css'),
      filename: '[name].bundle.css'
    },
    module: {
      rules: [
        {
          test: /.scss$/,
          exclude: /node_modules/,
          use: ExtractTextPlugin.extract({
            fallback: 'style-loader',
            use:[
              'css-loader?sourceMap',
              'postcss-loader?sourceMap',
              'sass-loader?sourceMap'
            ]
          })
        },
        {
          test: /.(jpe?g|png|gif|svg)$/i,
          use: [
            {
              loader: 'file-loader',
              options: {
                name: '../img/[name].[ext]'
              }
            }
          ]
        }
        // {
          // 10KB以下の画像をBase64で出力
        //   test: /.(jpe?g|png|gif|svg|ico)(?.+)?$/,
        //   use: {
        //     loader: 'url-loader',
        //     options: {
        //       limit: 10240,
        //       name: '../img/[name].[ext]'
        //     }
        //   }
        // }
      ]
    },
    plugins: [
      new ExtractTextPlugin('[name].bundle.css')
    ],
    resolve: {
      // style-loader の中で、.jsファイルを拡張子なしで requireしているところがあるため、'.js'が必要
      extensions: ['.css', '.js']
    }
  },
  {
  // ========================================================
  // JS用モジュール
  // ========================================================
    entry: jsEntries,
    output: {
      path: path.resolve(__dirname, 'docs/dist/js'),
      publicPath: '/js/',
      filename: '[name].bundle.js'
    },
    module: {
      rules: [
        {
          enforce: 'pre',
          test: /.js$/,
          exclude: /node_modules/,
          loader: 'eslint-loader'
        },
        {
          test: /.js$/,
          exclude: /node_modules/,
          loader: 'babel-loader'
        }
      ]
    },
    plugins: [
      /* use jQuery as Global */
      new webpack.ProvidePlugin({
        jQuery: 'jquery',
        $: 'jquery'
      })
    ],
    resolve: {
      extensions: ['.js']
    }
  }
];