文件加载器更改了图像文件名,但未更改 HTML 文件中的文件名 [英] File loader changed image file name but not the file name in HTML file
问题描述
我需要使用 webpack 加载 ico 和 svg 文件.但是,文件名转换为哈希数,因此 HTML 文件无法归档这些资产并生成 404 错误.
I need to load ico and svg file using webpack. However, file name is converted to hash number, therefore HTML file cannot file those asset and generate a 404 error.
我需要加载器对资产文件名进行哈希处理,同时在 HTML 文件中将文件名更改为哈希名称.我怎样才能做到这一点?
I need the loaders to hash the asset file name, AND change the file name to the hash name at the same time in HTML file. How can I do this?
这是显示一个 svg 和一个图标的 html 代码.
Here is the html code to display one svg and one icon.
<object type="image/svg+xml" data="spider-web.svg">
Your browser does not support SVG
</object>
<img src="favicon.ico" alt="">
下面是 webpack 配置文件:
below is webpack config file:
'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' }
]
}
}
推荐答案
这里有几个选项.最快的方法是为加载程序提供一个 name query 字符串选项.
You have a couple of options here. The quickest one would be to provide a name query string option to the loader.
例如文件加载器将是:
{
test: /\.(ttf|eot|svg)(\?[\s\S]+)?$/,
loader: 'file-loader?name=[name].[ext]'
},
您应该能够对 url-loader 使用相同的查询参数.
You should be able to use the same query parameter for the url-loader.
这篇关于文件加载器更改了图像文件名,但未更改 HTML 文件中的文件名的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!