文件加载器更改了图像文件的文件名，但没有更改HTML文件中的文件名。

Question

我需要使用webpack加载ico和svg文件。但是，文件名被转换为哈希数字，因此HTML文件无法找到这些资源并生成404错误。

我需要加载器对资源文件名进行哈希处理，并同时在HTML文件中将文件名更改为哈希名称。我该如何做到这一点？

以下是用于显示一个SVG和一个图标的HTML代码。

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

以下是webpack配置文件：

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

- Nicolas S.Xu

Answer 1

你有几个选择。最快的方法是向加载器提供一个name query字符串选项。

例如，文件加载器将是：

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

你应该能够在url-loader中使用相同的查询参数。

- cgatian

---

Webpack 5的一个新变化是：查询参数现在已经移动到了options属性中：{ test: /\.(svg)$/i, loader: 'file-loader', options: { name: 'icons/[name].[ext]' } }, - FloppyNotFound