パッケージされた電子アプリケーションでイメージアセットが見つかりません - angular4とwebpack

Question

私はAngularとWebpackを使用して電子アプリを作成していますが、私の唯一のイメージへの参照は何とかビルドに歪んでいます。私はそれはwebpackの設定エラーだと思う何とか電子は、アプリケーションを実行する - 実際の結果のURLが.jsと.pngファイルがdistに出力するときに座っているに応じて正しいディレクトリを指しています。

画像がlogin.component.html

で参照されsrcディレクトリは、次のようになります。

src 
├── app/ 
│ └── login/ 
│  ├── login.component.html 
│  ├── login.component.ts 
│  └── login.component.css 
└── assets/ 
    └── images/ 
     └── someimage.png 

distのディレクトリ：

dist 
    ├── assets/ 
    │ └── images/ 
    │  └── someimage.png 
    ├── index.html 
    ├── index.js 
    ├── app.css 
    └── app.js 

ここに私の一般的な設定は

です

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')} 
     ]) 
    ] 
}; 

と私PRODは、結局のところ、index.htmlには欠落していた上記

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

Answer 1

と合併する<base href="./"> - これを追加し、URLが正しく