WebPACKのPNG画像

Question

をロードしない

私はいくつかのsrcフォルダ内の画像がありますのindex.htmlファイルで

src/img/favicon.png 
src/img/profpic.png 

を一部のHTMLファイルで

<link rel="shortcut icon" href="img/favicon.png" /> 

は私が

として指すようになりますように私がポイントになります

<img src="img/profpic.png" /> 

イメージ、フォントをwebpack経由で読み込もうとしています。以下は私のwebpack.configです

module.exports = { 
    context: path.resolve('src'), 
    entry: { 
     app: ["./index.ts"] 
    }, 
    output: { 
     path: path.resolve('build'), 
     filename: "appBundle.js" 
    }, 
    devServer: { 
     contentBase: 'src' 
    }, 
    watch: true, 
    module: { 
     preLoaders: [ 
      { 
       test: /\.ts$/, 
       loader: "tslint" 
      } 
     ], 
     loaders: [ 
        {test: /\.ts(x?)$/, exclude: /node_modules/,loaders: ['ng-annotate-loader','ts-loader']}, 
        { 
         test: /\.css$/, 
         loader: 'style-loader!css-loader' 
        }, 
        { 
         test: /\.scss$/, 
         loader: 'style!css!sass' 
        }, { 
         test: /\.html$/, 
         exclude: /node_modules/, 
         loader: 'raw' 
        }, { 
         test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
         loader: 'url-loader?limit=1000000&mimetype=application/font-woff' 
        }, { 
         test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
         loader: 'file-loader' 
        }, { 
         test: /\.json$/, 
         loader: "json-loader" 
        }, { 
         test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192' 
        } 
       ]; 
    } 
    plugins: [   
     new HtmlWebpackPlugin({ 
      template: './index.html', 
      inject: 'body', 
      hash: true 
     }), 
     new webpack.ProvidePlugin({ 
      $: 'jquery', 
      jQuery: 'jquery', 
      'window.jQuery': 'jquery', 
      'window.jquery': 'jquery' 
     }) 
    ], 
    resolve: { 
     extensions: ['', '.js', '.es6', '.ts'] 
    } 
} 

イメージ/フォントをwebpack出力フォルダに読み込もうとしています。それはどんなエラーも投げない。その成功した建物が、ビルドで私のWebPACK出力フォルダのフォントが罰金をロードしているが、画像がトリックを行って、HTML用のHTMLローダーに生ローダーを変更

Answer 1

をロードしていないとします。以下は私の変更です

{test: /\.ts(x?)$/, exclude: /node_modules/,loaders: ['ng-annotate-loader','ts-loader']}, 
{ 
    test: /\.css$/, 
    loader: 'style-loader!css-loader' 
}, 
{ 
    test: /\.scss$/, 
    loader: 'style!css!sass' 
}, { 
    **test: /\.html$/, 
    exclude: /node_modules/, 
    loader: 'html-loader'** 
}, { 
    test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
    loader: 'url-loader?limit=1000000&mimetype=application/font-woff' 
}, { 
    test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
    loader: 'file-loader' 
}, { 
    test: /\.json$/, 
    loader: "json-loader" 
}, { 
    **test: /\.png$/, 
    exclude: /node_modules/, 
    loader: 'file-loader?name=images/[name].[ext]'** 
}