Question

我正在使用Angular（自定义Webpack构建过程）和 Workbox v.3.2.0 和 workbox-webpack-plugin v.3.2.0 （InjectManifest）插件）用于预先缓存，并且修改由 extract-text-webpack-plugin 生成的 style.css 文件时遇到困难。

如果我更改了相应的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生成的文件，更新版本没有任何问题（即使对于没有嵌入到文件名中的修订版的资产）

有人可以帮帮我吗？谢谢:)）

workbox-webpack-plugin不会更新由extractTextWebpackPlugin.extract（...）方法生成的CSS文件的修订版本

0 个答案: