title: Where do files emitted by file-loader live in the output bundle?
body: <p>I have a simple <em>Hello World</em>-type web application. It simply displays the text "Hello, World!" with a background image. The app works as expected, but I would like to better understand how the image is bundled and served.</p>
  
  <p>When I run <code>webpack-dev-server</code>, I see that my background image <code>pattern.svg</code> is emitted as <code>e78b561561e0911af1eae4c8c3de25c4.svg</code>:</p>
  
  <pre><code>                               Asset       Size  Chunks             Chunk Names
  e78b561561e0911af1eae4c8c3de25c4.svg    27.7 kB          [emitted]
                       index_bundle.js     748 kB       0  [emitted]  main
                            index.html  435 bytes          [emitted]
  </code></pre>
  
  <p>If I visit <code>http://localhost:[my-port]/e78b561561e0911af1eae4c8c3de25c4.svg</code>, the image is served as expected. However, if I look at webpack's output in my <code>dist</code> folder, I only see two files:</p>
  
  <pre><code># ls -al dist
  total 260
  drwxr-xr-x 2 root root     45 Oct 17 15:43 .
  drwxr-xr-x 6 root root    132 Oct 17 15:58 ..
  -rw-r--r-- 1 root root    435 Oct 17 15:43 index.html
  -rw-r--r-- 1 root root 260176 Oct 17 15:43 index_bundle.js
  </code></pre>
  
  <p>What happens when I request <code>http://localhost:[my-port]/e78b561561e0911af1eae4c8c3de25c4.svg</code>? Where does the image live in webpack's output bundle, and how does the server know to map <code>http://localhost:[my-port]/e78b561561e0911af1eae4c8c3de25c4.svg</code> to this image? For reference, see contents of relevant files below.</p>
  
  <h2>/app/index.html</h2>
  
  <pre><code>...
  &lt;body&gt;
    &lt;div id='app' /&gt;
  &lt;/body&gt;
  ...
  </code></pre>
  
  <h2>/app/index.js</h2>
  
  <pre><code>var React = require('react');
  var ReactDOM = require('react-dom');
  require('./styles/main.css');
  ...
  </code></pre>
  
  <h2>/app/styles/main.css</h2>
  
  <pre><code>#app {
    background-image: url('../images/pattern.svg');
  }
  </code></pre>
  
  <h2>/webpack.config.js</h2>
  
  <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: 'dist',
      filename: 'index_bundle.js'
    },
    module: {
      loaders: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          loader: 'babel'
        },
        {
          test: /\.css$/,
          loader: 'style-loader!css-loader'
        },
        {
          test: /\.(svg)$/i,
          loader: 'file'
        }
      ]
    },
    plugins: [
      HtmlWebpackPluginConfig
    ]
  }
  </code></pre>