title: Webpack: Loading images from html templates
body: <p>I'm trying to set up an angular project using Webpack but I can't figure out how to reference images from within html templates and have them included in the build.</p>
  
  <p>My project tree is as follows:</p>
  
  <pre><code>package.json
  app/
  - images/
    - foo.png
  - scripts/
  - styles/
  - templates/
  </code></pre>
  
  <p>I'm trying to use <code>html-loader</code> along with <code>url-loader</code> and <code>file-loader</code> but it's just not happening.</p>
  
  <p>This is an example template: <code>app/templates/foo.html</code></p>
  
  <pre><code>&lt;img src="../images/foo.png" /&gt;
  </code></pre>
  
  <p><strong>Problem #1</strong>: I would like to be able to reference images relative to <code>app/</code>. Right now, the paths need to be relative to the template file and this will get ugly very quickly (<code>../../../images/foo.png</code>).</p>
  
  <p><strong>Problem #2</strong>: Even if I specify the relative path, as I have done above, the project builds successfully but nothing really happens. The paths are left as-is and no images appear in <code>dist/</code>.</p>
  
  <p>Here is my webpack config:</p>
  
  <pre><code>var path = require('path');
  var webpack = require('webpack');
  var ngminPlugin = require('ngmin-webpack-plugin');
  var HtmlWebpackPlugin = require('html-webpack-plugin');
  var ExtractTextPlugin = require('extract-text-webpack-plugin');
  var ngAnnotatePlugin = require('ng-annotate-webpack-plugin');
  module.exports = function(config, env) {
    var appRoot = path.join(__dirname, 'app/')
    if(!env) env = 'development';
    var webpackConfig = {
      cache: true,
      debug: true,
      contentBase: appRoot,
      entry: {
        app: path.join(appRoot, '/scripts/app.coffee')
      },
  
      output: {
        path: path.join(__dirname, 'dist/),
        publicPath: '/',
        libraryTarget: 'var',
        filename: 'scripts/[name].[hash].js',
        chunkFilename: '[name].[chunkhash].js'
      },
  
      module: {
        loaders: [
          {
            test: /\.css$/,
            loader: ExtractTextPlugin.extract("style-loader", "css-loader")
          },
          {
              test: /\.scss$/,
              loader: ExtractTextPlugin.extract('style-loader', 'css-loader!sass-loader?outputStyle=expanded&amp;includePaths[]=./node_modules/foundation/scss/')
          },
          {
            test: /\.coffee$/,
            loader: 'coffee-loader'
          },
          {
            loader: 'ngtemplate?relativeTo=' + (path.resolve(__dirname, './app')) + '/!html'
          },
          {
            test: /\.png$/, loader: "url-loader?limit=100000&amp;mimetype=image/png&amp;name=[path][name].[hash].[ext]"
          },
          {
            test: /\.jpg$/, loader: "file-loader?name=[path][name].[hash].[ext]"
          },
          {
            test: /\.(woff|woff2)(\?(.*))?$/,
            loader: 'url?prefix=factorynts/&amp;limit=5000&amp;mimetype=application/font-woff'
          },
          {
            test: /\.ttf(\?(.*))?$/,
            loader: 'file?prefix=fonts/'
          },
          {
            test: /\.eot(\?(.*))?$/,
            loader: 'file?prefix=fonts/'
          },
          {
            test: /\.svg(\?(.*))?$/,
            loader: 'file?prefix=fonts/'
          },
          {
            test: /\.json$/,
            loader: 'json'
          }
        ]
      },
  
      resolve: {
        extensions: [
          '',
          '.js',
          '.coffee',
          '.scss',
          '.css'
        ],
        root: [appRoot],
      },
  
      singleRun: true,
      plugins: [
        new webpack.ContextReplacementPlugin(/.*$/, /a^/),
        new webpack.ProvidePlugin({
          '_': 'lodash'
        }),
        new ExtractTextPlugin("styles/[name].[chunkhash].css", {allChunks: true}),
        new HtmlWebpackPlugin({
          template: appRoot + '/app.html',
          filename: 'app.html',
          inject: 'body',
          chunks: ['app']
        })
      ],
      devtool: 'eval'
    }
  
    if(env === 'production') {
      webpackConfig.plugins = webpackConfig.plugins.concat(
        new ngAnnotatePlugin(),
        new webpack.optimize.UglifyJsPlugin(),
        new webpack.DefinePlugin({
          'process-env': {
            'NODE_ENV': JSON.stringify('production')
          }
        }),
        new webpack.optimize.DedupePlugin(),
        new webpack.optimize.UglifyJsPlugin()
      );
      webpackConfig.devtool = false;
      webpackConfig.debug = false;
    }
    return webpackConfig;
  </code></pre>
  
  <p>}</p>