workbox没有使用webpack-dev-server获取内存中的文件

Question

在我们的项目中,我们使用webpack-dev-server来运行我们的开发环境.我们目前正在使用工作箱将项目转换为渐进式网络应用程序.

当我们使用NODE_ENV = production运行webpack时,一切正常,因为它首先编译文件,然后工作箱插件将它们拾取并将它们添加到服务工作者.

当我们运行webpack-dev-server hot时,运行workbox插件时构建失败,因为它找不到dist文件夹中的任何文件.

问题似乎是工作箱没有拾取内存中生成的js和css文件,似乎需要文件系统上的文件.

module.exports = {
  context: path.resolve(__dirname, 'front'),
  entry: [
    ...preEntries,
    './react/app.js'
  ],
  output: {
    path: path.resolve(__dirname, 'front-dist'),
    filename: `react/app.${git.gitCommitAbbrev}.js`,
    chunkFilename: `react/[id].app.${git.gitCommitAbbrev}.js`,
    publicPath: '/glass/'
  },
  devtool: isProdEnv ? false : 'eval-source-map',
  stats: {
    chunkModules: false
  },
  module: {
    ...
  },
  plugins: [
    new WorkboxPlugin({
      globDirectory: path.resolve(__dirname, 'front-dist'),
      globPatterns: ['**/*.{html,js,css,woff2}'],
      swDest: path.join(path.resolve(__dirname, 'front-dist/sw/'), 'service-worker.js'),
      handleFetch: true,
      clientsClaim: true,
      skipWaiting: true,
    })
  ]
}

任何关于如何工作的想法

Answer 1

最近的版本workbox-webpack-plugin支持内存中文件系统，并在其测试套件中进行了覆盖。

如果您在使用当前版本的 Workbox 时仍然遇到问题，请在问题跟踪器上提出问题，我们可以进一步调查。

话虽这么说，在热重载的本地开发环境中使用缓存优先的服务工作线程是一个令人费解的选择，因为缓存违背了立即查看更新的目的。