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

Question

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

当我们使用 NODE_ENV=production 运行 webpack 时，一切正常，因为它首先编译文件，然后工作箱插件会选择它们并将它们添加到 service-worker。

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

问题似乎是 workbox 没有获取在内存中生成的 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的最新版本支持内存文件系统，使用 coverage in its test suite .
如果您对当前版本的 Workbox 仍有问题，请 open an issue在问题跟踪器上，我们可以进一步调查。
话虽如此，在热重载本地开发环境中使用缓存优先服务 worker 是一个令人费解的选择，因为缓存违背了立即查看更新的目的。