Почему workbox-webpack-plugin добавляет "auto" ко всем путям активов? (в результате 404-х при запуске приложения)

ProgramBox

Почему workbox-webpack-plugin добавляет «auto» ко всем путям активов? (в результате 404-х при запуске приложения)

Post author:admin
Запись опубликована:5 марта, 2023
Post category:Вопросы по программированию

#webpack #workbox #workbox-webpack-plugin

Вопрос:

Workbox сводит меня с ума. При запуске моего приложения все предварительно кэшированные маршруты возвращают http404, потому что плагин workbox InjectManifest добавляет «auto» ко всем кэшированным 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 information.

Я не знаю, почему я получаю эту ошибку, потому что я установил watch:false в моей конфигурации webpack.

Обратите внимание, что все пути имеют «auto» впереди и возвращают http404. Обратите внимание, что я очистил все кэши на вкладке «Приложение» в Chrome. То же самое происходит на вкладке инкогнито.

Когда открываете новую вкладку и удаляете «auto», все работает нормально:

Файл service worker с введенным манифестом показывает, что «auto» является частью URL-адресов:

Кто-нибудь видел это раньше? Я начинаю подумывать о написании service worker с нуля и отказе от workbox, но я бы, очевидно, предпочел использовать workbox, если смогу заставить его работать должным образом.

Код:

Я использую workbox-webpack-plugin для введения манифеста предварительного кэша в мой service worker, например:

 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"
    }
}

Ответ №1:

Проблема здесь заключалась в том, что workbox-webpack-plugin v5 не был совместим с webpack v5, который только что был выпущен. Решение состояло в том, чтобы вместо этого использовать webpack v4.