Question

我使用webpack-html-plugin生成一页静态网站。我试图为静态资产实现缓存清除，尤其是图像。我还有一个开放图形图像的元标记，如下所示。

我的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

但我没有到达任何地方。任何帮助将不胜感激:)）

Answer 1

解决方案非常简单，实际上我过于复杂。基本上我需要做的只是require ejs标签内的图像，如下所示：

index.ejs

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

似乎webpack让我习惯于以复杂的方式做简单的事情。不是这次，但是：）

Webpack静态网站图片缓存破坏

1 个答案: