ファイルローダーがイメージファイル名を変更しましたが、HTMLファイルのファイル名は変更しません

Question

webpackを使用してicoファイルとsvgファイルをロードする必要があります。ただし、ファイル名はハッシュ番号に変換されるため、HTMLファイルはそのアセットをファイルに書き込むことができず、404エラーが生成されます。

私はアセットファイル名をハッシュし、HTMLファイル内の同じ時間にハッシュ名にファイル名を変更するローダーを必要としています。これどうやってするの？

ここでは、1つのsvgと1つのアイコンを表示するhtmlコードです。あなたがここにオプションのカップルを持っている

'use strict'; 
// webpack.config.js 

var webpack = require('webpack'); 
var path = require('path'); 
var HtmlWebpackPlugin = require('html-webpack-plugin'); 

var entryBasePath = __dirname; 
var outputBasePath = __dirname + '/dist'; 


module.exports = { 
    context: entryBasePath, 
    entry:{ 
     app: ['webpack/hot/dev-server', './appEntry.js'] 
    }, 
    output: { 
     path: outputBasePath, 
     filename: './bundle.js', 
     sourceMapFilename: '[file].map' // set source map output name rule 
    }, 
    devtool: 'source-map', // enable source map 
    plugins: [ 
     new webpack.HotModuleReplacementPlugin(), 
     new HtmlWebpackPlugin({template: 'index.html'}), 
     // new webpack.optimize.UglifyJsPlugin({compress: {warnings: false}}) 
    ], 
    module: { 
     loaders: [ 
      {test: /\.scss$/, loader: 'style!css!sass'}, 
      {test: /\.css$/, loader: 'style!css'}, 
      {test: /\.(html|ico)(\?[\s\S]+)?$/, loader: 'raw'}, 
      { 
     test: /\.woff2?(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
     loader: "url?limit=10000" 
     }, 
     { 
     test: /\.(ttf|eot|svg)(\?[\s\S]+)?$/, 
     loader: 'file' 
     }, 
     { test: /bootstrap-sass\/assets\/javascripts\//, loader: 'imports?jQuery=jquery' }, 
     { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192' } 
    ] 
    } 
} 

Answer 1

：

<object type="image/svg+xml" data="spider-web.svg"> 
     Your browser does not support SVG 
    </object> 
    <img src="favicon.ico" alt=""> 

は以下WebPACKの設定ファイルです。最も速いのはローダーにname query文字列オプションを指定することです。

たとえば、ファイルローダーは次のようになります。

{ 
    test: /\.(ttf|eot|svg)(\?[\s\S]+)?$/, 
    loader: 'file-loader?name=[name].[ext]' 
    }, 

あなたは、URLローダーに同じクエリパラメータを使用することができるはずです。