Webpack静态网站图像缓存破坏_Webpack_Webpack 2_Html Webpack Plugin

Webpack静态网站图像缓存破坏

webpack

Webpack静态网站图像缓存破坏,webpack,webpack-2,html-webpack-plugin,Webpack,Webpack 2,Html Webpack Plugin,我正在使用webpackhtml插件生成一个单页静态网站。我正在尝试为静态资产（尤其是图像）实现缓存破坏。我还有一个用于打开图形图像的元标记，如下所示我的webpack.config.js大致如下： module.exports = { entry: './src/init.js', output: { path: './build', filename: 'bundle.js', }, module: { loaders: [{ tes

我正在使用

webpackhtml插件

生成一个单页静态网站。我正在尝试为静态资产（尤其是图像）实现缓存破坏。我还有一个用于打开图形图像的元标记，如下所示

我的

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添加图像时向我的图像添加哈希值。我知道，为了触发图像加载程序，我需要

要求js中的图像，但是我的init.js
只包含jquery插件初始化
我尝试查看以下加载程序以与ejs加载程序集成
html加载程序
+提取加载程序
+文件加载程序

但我什么也没得到。
任何帮助都将不胜感激：）解决方案非常简单，实际上我把事情复杂化了。
基本上，我需要做的只是需要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>

index.ejs

<img src="<%= require('./assets/images/logo.png') %>" />

“/>

似乎webpack让我习惯了以复杂的方式做简单的事情。但这次不是：）
所以我仍然需要使用类似文件加载器的加载器来散列文件并将其放入构建目录，对吗？是的。没错。正如文件加载器
文档所说，它解决了文件的需要/导入问题，并将其复制到dist dir.通过一些额外的配置，您还可以使用哈希重命名文件，就像我在我的网页配置中那样：{test://\（jpe？g | png | gif | svg）$/，loader:'file loader？name=assets/images/[name].[ext]？[hash]}
您可以使用[hash]如果你愿意的话，在文件名里面，但是我选择了queryparam只是为了破坏浏览器缓存。希望这能有所帮助