4

webpack-html-plugin1ページの静的Webサイトを生成するために使用しています。静的アセット、特に画像のキャッシュ無効化を実装しようとしています。以下にリストされている、開いているグラフ画像のメタタグもあります。

私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.jsjquery プラグインの初期化のみが含まれています。

と統合するために次のローダーを調べてみましたejs-loader

html-loader+ extract-loader+file-loader

しかし、私はどこにも行きませんでした。どんな助けでも大歓迎です:)

4

1 に答える 1