我正在使用 webpack-html-plugin生成一页静态网站。我正在尝试为静态 Assets (尤其是图像)实现缓存破坏。我还有一个用于打开图形图像的元标记，如下所列。
我的 webpack.config.js看起来像这样:
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 插件初始化。我尝试查看以下加载器以与
ejs-loader 集成html-loader + extract-loader + file-loader但我什么也没得到。
任何帮助将非常感激 :)
最佳答案
解决方案是如此简单，以至于我实际上把事情复杂化了。
基本上我需要做的只是 require ejs 标签内的图像，如下所示:index.ejs
<img src="<%= require('./assets/images/logo.png') %>" />
似乎 webpack 让我习惯于以复杂的方式做简单的事情。不过这次不是:)
关于Webpack 静态网站图片缓存破坏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43064019/