title: Copy images in html files to output directory with webpack
body: <p>I'm trying to configure webpack so it parses my <code>index.html</code> (ideally with HTMLWebpack Plugin), so that any included image (e.g. <code>&lt;object data=&quot;images/test.svg&quot;&gt;</code>) is moved to my output folder, with the folder path remaining the same. Ultimately, running webpack-dev-server should render a page that displays my images.</p>
  <p><a href="https://stackoverflow.com/questions/27639005/how-to-copy-static-files-to-build-directory-with-webpack">This</a> question is somewhat related, but doesn't quite match my own problem.</p>
  <h3>What I tried to do:</h3>
  <p>As you can see from my config file, <a href="https://www.npmjs.com/package/html-loader" rel="nofollow noreferrer">I tried using the html-loader</a>. Without the <code>exclude: /index\.html$/</code> it gives me an error. My guess is that the HTMLWebpack Plugin and the html-loader don't get along. Excluding index.html defeats the purpose of html-loader. File-loader doesn't recognize images that aren't included using <code>require(image)</code>.</p>
  <p>What is currently happening: Everything runs fine, but there's no images folder, nor any image in <code>/dist/</code>.</p>
  <p>My current <strong>webpack.config.js</strong></p>
  <pre><code>var HtmlWebpackPlugin = require('html-webpack-plugin');
  var HTMLWebpackPluginConfig = new HtmlWebpackPlugin({
    template: __dirname + '/app/index.html',
    filename: 'index.html',
    inject: 'body'
  });
  
  module.exports = {
    entry: './app/index.js',
  
    output: {
      path: __dirname + '/dist',
      publicPath: '/dist',
      filename: 'index_bundle.js'
    },
  
    module: {
      loaders: [
      { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader'},
      { test: /\.svg$/, loader: 'file-loader' },
      { test: /\.html$/, exclude: /index\.html$/, loader: 'html-loader'}
      ]
    },
  
    plugins: [
      HTMLWebpackPluginConfig
    ]
  }
  </code></pre>
  <p>Example <strong>index.html</strong></p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
      &lt;meta charset=&quot;UTF-8&quot;&gt;
      &lt;title&gt;Test&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id=&quot;demoSpace&quot;&gt;&lt;object data=&quot;images/test.svg&quot;  type=&quot;image/svg+xml&quot;&gt;&lt;/object&gt;&lt;/div&gt;
      &lt;div id=&quot;test&quot;&gt;&lt;/div&gt; 
      &lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js&quot;&gt;      
      &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>