Рабочий сервис работник + манифест.json настройка webpack 4

Question

Я пытаюсь создать конструктор веб-пакетов с рабочей коробкой, как я вижу, использует Vue CLI 3.В моем файле package.json я сделал «build» для сборки и компиляции файлов и «dev» для его запуска.

"build": "webpack --mode development",
"dev": "nodemon --inspect --watch webpack.config.js main.js"

Я использую InjectManifest из workbox-webpack-plugin для обработкисборка в моем webpack.config.js файле.Я пробовал разные варианты, чтобы увидеть, что они сделали.

webpack.config.js

const path = require('path')
const webpack = require('webpack')
const HTMLWebpackPlugin = require('html-webpack-plugin')
const SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin')
const {GenerateSW, InjectManifest} = require('workbox-webpack-plugin')


module.exports = {
    mode: 'production',
    entry: {
        app: [
            '@babel/polyfill',
            './src/main.js'
        ]
    },
    output: {
        path: path.resolve(__dirname, 'dist/'),
        filename: '[name]-[hash].js',
        publicPath: '/'
    },
    devServer: {
        inline: false,
        contentBase: "./dist",
        overlay: true,
        hot: true,
        stats: {
            colors: true
        }
    },
    module: {
        rules: [
            {
                test: /\.html$/,
                use: {
                    loader: 'html-loader'
                }
            },
            {
                test: /\.js?$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                query: {
                    presets: ['@babel/preset-env']
                }
            },
            {
                test: /\.css$/,
                loader: [
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test: /\.scss$/,
                use: [
                    {
                        loader: "style-loader"
                    },
                    {
                        loader: "css-loader", options: {
                            sourceMap: true
                        }
                    },
                    {
                        loader: "sass-loader", options: {
                            sourceMap: true
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new HTMLWebpackPlugin({
            template: './public/index.html'
        }),
        // new GenerateSW({
        //     include: [/\.html$/, /\.js$/, /\.css$/],
        //     exclude: '/node_modules'
        // }),
        new InjectManifest({
            swSrc: './src/js/registerServiceWorker.js',
            swDest: '/serviceworker.js',
            exclude: '/node_modules'
          })
        // service worker caching
        // new SWPrecacheWebpackPlugin(
        //     {
        //         cacheId: 'webpack-project',
        //         filename: 'service-worker.js',
        //         staticFileGlobs: [
        //             'dist/**/*.{js,css}',
        //             '/'
        //         ],
        //         minify: true,
        //         stripPrefix: 'dist/',
        //         dontCacheBustUrlsMatching: /\.\w{6}\./
        //     }
        // )
    ]
}

Когда я строю проект, я создаю следующие файлы:

app-e8dd91....js
index.html
precache-manifest.d92js8....js
serviceworker.js

В файл index.html добавляется только файл app-e8d91 .... js в виде сценария, в результате чего файл манифеста и кэшированный рабочий не используются, что приводит к тому, что в моем сервисном работнике нетlocalhost.

У меня есть файл registerServiceWorker.js, на который ссылается плагин injectManifest.

registerServiceWorker.js

 import { register } from "register-service-worker";
const path = require('path')

register(path.resolve(__dirname, 'service-worker.js'), {
    ready() {
        console.log(
        "App is being served from cache by a service worker."
        );
    },
    cached() {
        console.log("Content has been cached for offline use.");
    },
    updated() {
        console.log("New content is available; please refresh.");
    },
    offline() {
        console.log(
        "No internet connection found. App is running in offline mode."
        );
    },
    error(error) {
        console.error("Error during service worker registration:", error);
    }
});

Как сделатья делаю сборку, создаю и добавляю файл service worker + manifest.json, чтобы он работал на localhost, а также работал в автономном режиме?

Структура файла:

webpack.config.js
server.js (handle server + webpackHotMiddleware + express)
dist (builded folder)
src (folder)
     main.js
     js (folder)
         registerServiceWorker.js
public (folder)
    index.html
    manifest.json
    favicon.ico