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文件，但它的修订版在预缓存清单中没有更改。

结果，我最终得到了服务工作者缓存中未更新的文件。

以下是 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