title: Image assets not found in packaged electron app - angular4 and webpack
body: <p>I'm writing an electron app using Angular and Webpack and I have an issue where my one and only reference to an image is getting skewed in the build somehow. I suspect it's a webpack config error somehow tied in to what electron does to run the app - given the actual resultant URL points to the correct directory according to where the .js and .png files sit when output to dist.</p>
  
  <p>The image is reference in login.component.html</p>
  
  <p>The the src directory looks like this:</p>
  
  <pre><code>src
  ├── app/
  │   └── login/
  │        ├── login.component.html
  │        ├── login.component.ts
  │        └── login.component.css
  └── assets/
      └── images/
          └── someimage.png
  </code></pre>
  
  <p>the dist dir:</p>
  
  <pre><code> dist 
     ├── assets/
     │    └── images/
     │        └── someimage.png
     ├── index.html
     ├── index.js
     ├── app.css
     └── app.js
  </code></pre>
  
  <p>Here's my common config</p>
  
  <pre><code>var webpack = require('webpack');
  var HtmlWebpackPlugin = require('html-webpack-plugin');
  var ExtractTextPlugin = require('extract-text-webpack-plugin');
  var helpers = require('./helpers');
  const CopyWebpackPlugin = require('copy-webpack-plugin');
  
  module.exports = {
      entry: {
          'polyfills': './src/polyfills.ts',
          'vendor': './src/vendor.ts',
          'app': './src/app.ts',
      },
  
      resolve: {
          extensions: ['.ts', '.js']
      },
  
      target: "electron-renderer",
  
      module: {
          rules: [
              {
                  test: /\.ts$/,
                  loaders: [
                      {
                          loader: 'awesome-typescript-loader',
                          options: { configFileName: helpers.root('src', 'tsconfig.json') }
                      }, 'angular2-template-loader'
                  ]
              },
              {
                  test: /\.html$/,
                  loader: 'html-loader'
              },
              {
                  test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
                  loader: 'file-loader?name=assets/[name].[hash].[ext]'
              },
              {
                  test: /\.scss$/,
                  exclude: helpers.root('src','app'),
                  use: [{
                      loader: ExtractTextPlugin.extract({ fallbackLoader: 'style-loader', loader: 'css-loader?sourceMap' })
                  },
                  {
                      loader: 'css-loader',
                      options: {
                          sourceMaps: true
                      }
                  }, 
                  {
                      loader: "resolve-url-loader"
                  },
                  {
                      loader: "sass-loader", 
                      options: {
                          sourceMaps: true
                      }
                  }]
              },
              {
                  test: /\.scss$/,
                  include: helpers.root('src','app'),
                  use: [
                      {
                          loader: 'raw-loader'
                      },
                      {
                          loader: "sass-loader"
                      }
                  ]
              }
          ]
      },
  
      plugins: [
          // Workaround for angular/angular#11580
          new webpack.ContextReplacementPlugin(
              // The (\\|\/) piece accounts for path separators in *nix and Windows
              /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
              helpers.root('./src'), // location of your src
              {} // a map of your routes
          ),
  
          new webpack.optimize.CommonsChunkPlugin({
              name: ['app', 'vendor', 'polyfills']
          }),
  
          new HtmlWebpackPlugin({
              template: 'src/index.html'
          }),
  
          new CopyWebpackPlugin([
              {from: helpers.root('./src/index.js'),to: helpers.root('./dist/index.js')},
              {from: helpers.root('./package.json'),to: helpers.root('./dist/package.json')}
          ])
      ]
  };
  </code></pre>
  
  <p>and my prod to merge with the above</p>
  
  <pre><code>const webpack = require('webpack');
  const webpackMerge = require('webpack-merge');
  const ExtractTextPlugin = require('extract-text-webpack-plugin');
  const commonConfig = require('./webpack.common.js');
  const helpers = require('./helpers');
  const ElectronConnectWebpackPlugin = require('electron-connect-webpack-plugin');
  const path = require('path');
  
  const ENV = process.env.NODE_ENV = process.env.ENV = 'production';
  
  module.exports = webpackMerge(commonConfig, {
    output: {
      path: helpers.root('dist'),
      filename: '[name].js',
      chunkFilename: '[id].[hash].chunk.js'
    },
  
    plugins: [
      new webpack.NoEmitOnErrorsPlugin(),
  
      new ExtractTextPlugin('[name].[hash].css'),
      new webpack.DefinePlugin({
        'process.env': {
          'ENV': JSON.stringify(ENV)
        }
      }),
      new webpack.LoaderOptionsPlugin({
        htmlLoader: {
          minimize: false // workaround for ng2
        }
      })
    ]
  });
  </code></pre>