Webpack 静态网站图片缓存破坏 [英] Webpack static website images cache busting
问题描述
我正在使用 webpack-html-plugin 生成一个单页静态网站.我正在尝试为静态资产(尤其是图像)实施缓存破坏.我还有一个用于打开图形图像的元标记，如下所列.
I'm using webpack-html-plugin to generate a one-page static website. I'm trying to implement cache busting for the static assets, images especially. I also have a meta tag for an open graph image, which is listed bellow.
我的 webpack.config.js 看起来是这样的:
My webpack.config.js looks something along the lines of this:
module.exports = {
entry: './src/init.js',
output: {
path: './build',
filename: 'bundle.js',
},
module: {
loaders: [{
test: /\.js?$/,
exclude: /node_modules/,
loader: 'babel-loader'
}, {
test: /\.(jpe?g|png|gif|svg)$/,
loader: 'file-loader?name=assets/images/[name].[ext]?[hash]'
}, {
test: /\.ejs$/,
loader: 'ejs-loader?variable=data'
}],
plugins: {
new HtmlWebpackPlugin({
template: 'src/index.ejs',
inject: 'head',
hash: true
})
}
}
}
index.ejs 文件如下所示:
<!DOCTYPE html>
<html>
<head>
<!-- ... -->
<meta property="og:image" content="http://cdn/images/og.jpg"/>
<!-- ... -->
<link href="bundle.css?e0aad4b4f9d09a3a49dc" rel="stylesheet">
<script type="text/javascript" src="bundle.js?e0aad4b4f9d09a3a49dc">
</head>
<body>
<!-- ... -->
<img src="/images/logo.png" />
<!-- ... -->
</body>
我的目标是让 webpack 向我的图像添加哈希，因为它为 js 和 css 添加它们.我知道为了触发图像加载器，我需要 require js 中的图像，但我的 init.js 只包含 jquery 插件初始化.
My goal is to make webpack add hashes to my images as it's adding them for js and css. I know that in order to trigger the images loaders I would need to require the images in js, but my init.js only contains jquery plugins initialisation.
我尝试查看以下加载器以与 ejs-loader
I tried looking at the following loaders to integrate with the ejs-loader
html-loader + extract-loader + file-loader
但是我什么也没得到.任何帮助将不胜感激:)
But I didn't get anywhere. Any help would be much appreciated :)
推荐答案
解决方案太简单了，实际上我把事情复杂化了.基本上我需要做的只是 require ejs 标签内的图像，如下所示:
The solution was so simple that I was actually overcomplicating things.
Basically what I needed to do is simply require the images inside ejs tags, like this:
index.ejs
<img src="<%= require('./assets/images/logo.png') %>" />
似乎 webpack 让我习惯于以复杂的方式做简单的事情.不过这次不是:)
It seems like webpack got me used with doing simple things in a complicated way. Not this time though :)
这篇关于Webpack 静态网站图片缓存破坏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
