javascript - 工作箱服务工作者 + manifest.json 设置 webpack 4

Question

我正在尝试使用工作箱创建一个 webpack 构建器，因为我可以看到 Vue CLI 3 正在使用。在我的 package.json 文件中，我创建了一个“build”来构建和编译文件，并创建了一个“dev”来运行它。

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

我使用InjectManifestfromworkbox-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 文件添加为脚本，而不会使用预缓存的清单文件和服务工作者，这导致我的本地主机没有服务工作者。

我有一个 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