Question

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

当我们使用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的最新版本支持coverage in its test suite的内存文件系统。

如果您仍无法使用当前版本的Workbox，请在问题跟踪器上open an issue，我们将进行进一步调查。

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

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

1 个答案: