Copy images in html files to output directory with webpack

I'm trying to configure webpack so it parses my index.html (ideally with HTMLWebpack Plugin), so that any included image (e.g. <object data="images/test.svg">) 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.

This question is somewhat related, but doesn't quite match my own problem.

What I tried to do:

As you can see from my config file, I tried using the html-loader. Without the exclude: /index\.html$/ 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 require(image).

What is currently happening: Everything runs fine, but there's no images folder, nor any image in /dist/.

My current webpack.config.js

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
  ]
}

Example index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
</head>
<body>
    <div id="demoSpace"><object data="images/test.svg"  type="image/svg+xml"></object></div>
    <div id="test"></div> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js">      
    </script>
</body>
</html>

Copy images in html files to output directory with webpack

What I tried to do:

1 Answers