为什么workbox-webpack-plugin会在所有资产路径之前“自动”放置？ 导致该应用启动时显示404

编程问答 2022-06-09

问题描述

WorkBox正在驱动我香蕉。当我的应用启动时，所有预缓存的路由都返回http404，因为工作箱InjectManifest插件似乎在所有缓存的URL之前“自动” 。我必须知道为什么要这样做。我尝试过重新安装npm软件包，以隐身模式运行，清除所有缓存等。

我使用“ webpack-dev-server --mode development --open”运行应用程序，并且收到以下警告，这可能是问题的一部分：

WARNING in InjectManifest has been called multiple times,perhaps due to running webpack in --watch mode. The precache manifest generated after the first call may be inaccurate! Please see https://github.com/GoogleChrome/workBox/issues/1790 for more @R_629_4045@ion.

我不知道为什么会收到此错误，因为我在Webpack配置中设置了watch：false。

请注意所有路径的前面都带有“ auto”并返回http404。请注意，我清除了Chrome浏览器“应用程序”标签上的所有缓存。隐身标签中也会发生同样的情况。

auto paths

打开新标签页并删除“自动”标签后，它可以正常工作：

works fine without auto

带有注入清单的服务工作者文件显示“自动”是网址的一部分：

enter image description here

以前有人看过吗？我开始考虑从头开始并抛弃工作箱来编写服务工作者，但如果可以让它正常工作，我显然宁愿使用工作箱。

代码：

我使用workBox-webpack-plugin将预缓存清单注入到我的服务工作者中，就像这样：

import {precacheAndRoute} from 'workBox-precaching';
import {registerRoute} from 'workBox-routing';
import {CacheFirst} from 'workBox-strategies';

// Use the imported WorkBox libraries to implement caching,// routing,and other logic:
precacheAndRoute(self.__WB_MANIFEST || []);

registerRoute(
    ({request}) => request.destination === 'image',new CacheFirst({cacheName: 'images'}),);

我的webpack.config.js如下所示，没什么花哨的：

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {InjectManifest} = require('workBox-webpack-plugin');

module.exports = {
    watch: false,entry: path.resolve(__dirname,'./src/index.js'),output: {
        path: path.resolve(__dirname,'dist'),filename: '[name].[contenthash].js',},module: {
        rules: [{test: /\.js$/,exclude: /node_modules/,loader: 'babel-loader'},{
            test: /\.(png|svg|jpg|gif)$/,use: [
                'file-loader',],}]
    },plugins: [
        new HtmlWebpackPlugin({
            title: 'Prototype webpack + react + workBox usage',template: './src/index.html',filename: './index.html','Meta': {
                'viewport': 'width=device-width,initial-scale=1.0','charset': 'UTF-8'
            }
        }),new InjectManifest({
            swSrc: './service-worker.js',swDest: './workBox-sw-generated.js',})
    ]
};

我的index.html也很简单：

<!DOCTYPE html>
<html lang="en">

<head>
    <title><%= htmlWebpackPlugin.options.title %></title>
    <script>
        if ('serviceWorker' in navigator) {
            window.addEventListener('load',() => {
              navigator.serviceWorker.register('/workBox-sw-generated.js')
            });
        }
    </script>
</head>

<body>
    <section id="index"></section>
</body>

</html>

这是我的package.json：

{
    "name": "simple_webpack_boilerplate","version": "1.0.0","description": "A ready to use simple webpack boilerplate for react","main": "src/index.js","scripts": {
        "start": "webpack-dev-server --mode development --open","build": "webpack --mode production"
    },"author": "Willem","license": "ISC","devDependencies": {
        "@babel/core": "7.11.4","@babel/preset-env": "7.11.0","@babel/preset-react": "7.10.4","babel-loader": "8.1.0","file-loader": "^6.1.1","html-webpack-plugin": "4.4.1","terser-webpack-plugin": "^4.1.0","webpack": "^5.0.0","webpack-cli": "^3.3.12","webpack-dev-server": "3.11.0","workBox-webpack-plugin": "^5.1.4"
    },"dependencies": {
        "lodash": "^4.17.20","react": "16.13.1","react-dom": "16.13.1","react-router-dom": "^5.2.0"
    }
}

解决方法

这里的问题是workbox-webpack-plugin v5与刚刚发布的webpack v5不兼容。解决方案是改用webpack v4。