2

Angular (カスタム Webpack ビルド プロシージャ) をWorkbox v.3.2.0と共にworkbox-webpack-plugin v.3.2.0 (InjectManifest プラグイン) と共に使用していますが、style.cssファイルのリビジョンに問題があります。 extract-text-webpack-pluginによって生成されます。

適切な CSS ファイルを変更すると、Webpack は更新されたstyle.cssファイルを生成しますが、そのリビジョンはプリキャッシュ マニフェストで変更されません。

その結果、Service Worker キャッシュで更新されていないファイルになってしまいます。

Webpack 構成の関連部分は次のとおりです (完全な構成は大きすぎます)。

{
  entry: {
    'polyfills': './src/polyfills.ts',
    'main': AOT ? './src/main.browser.aot.ts' : './src/main.browser.ts',
    'style': './src/main.scss'
  },
  resolve: {
    extensions: ['.ts', '.js', 'json', '.scss', '.html'],
    modules: [helpers.root('src'), helpers.root('node_modules')]
  }, 
  module: {
    rules: [
      ...
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract(['css-loader?sourceMap', 'postcss-loader', 'sass-loader?sourceMap']),
        exclude: [helpers.root('src', 'styles')]
      },
      ...
    ]
  },
  plugins: [
    ...
    new ExtractTextPlugin("[name].css"),
    new InjectManifest({
      swSrc: './service-worker.js',
      include: [
        /\.html$/,
        /\.js$/,
        /\.css$/,
        /\.ico$/,
        /\.json$/,
        /\.png/,
        /\.svg$/,
        /\.gif$/,
        /\.woff$/,
        /\.ttf$/,
        /\/workbox.*\/.*$/,
        /css.*\.css$/,
        /fonts.*\.(svg|eot|ttf|woff)$/,
        /i18n.*\.json$/,
        /img.*\.(svg|png|gif|jpeg|jpg)$/,
      ],
      exclude: [
        /poc\/.*$/,
        /service-worker.js$/,
        /icons-sprite/,
      ],
      importWorkboxFrom: 'local',
    }),
    ...
  ]
}

以前のリリース (もう存在しない) からnew ExtractTextPlugin("[name].[contenthash].css") の古いバージョンの参照ファイルをキャッシュする際の問題により、私は何かを使用できないことに注意してください 。index.htmlそのため、ファイル名にリビジョンを埋め込む代わりに、アンチキャッシュ URL パラメータを使用しています。

その他の Webpack で生成されたファイルの場合、リビジョンは問題なく更新されます (ファイル名にリビジョンが埋め込まれていないアセットの場合でも)。

誰かここで私を助けてくれませんか? ありがとう ：）

4

0 に答える 0