6

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

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

当我们热运行 webpack-dev-server 时，运行工作箱插件时构建失败，因为它在 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,
    })
  ]
}

关于这应该如何工作的任何想法

4

1 回答 1

0

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

如果您对当前版本的 Workbox 仍有问题，请在问题跟踪器上打开一个问题，我们可以进一步调查。

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

于 2020-12-15T18:16:16.627 回答