Workbox webpack encore 不起作用（在 symfony 4 应用程序中）

Question

如果问题已经找到并且有答案，我深表歉意，但是在对 intenert 的研究中，我没有找到任何有效的方法。

这是我的问题，我从 workbox 开始，我尝试将它集成到我仍然使用 webpack 的 Symfony 4 应用程序中，但它不能正常工作。所以我尝试使用 cli 生成 service worker，但我仍然无法让它工作。

我的 webpack 安可配置：

const Encore = require('@symfony/webpack-encore');
const CompressionPlugin = require('compression-webpack-plugin');
const {GenerateSW, InjectManifest} = require('workbox-webpack-plugin');
const path = require('path')

Encore
    .setOutputPath('public/build/')
    .setPublicPath('/build')
    .addEntry('app', './assets/js/app.js')
    .addEntry('cart', './assets/js/cart.js')
    .addEntry('site', './assets/js/site.js')
    .cleanupOutputBeforeBuild()
    .enableBuildNotifications()
    .enableSourceMaps(!Encore.isProduction())
    .enableVersioning(Encore.isProduction())
    .enableSassLoader()
    .enableVueLoader(() => {}, { runtimeCompilerBuild: false })
    .addLoader({
        test: /\.exec\.js$/,
        loader: 'script-loader'
    })
    .autoProvidejQuery()
    .autoProvideVariables({
        $: 'jquery',
        jQuery: 'jquery',
        'window.jQuery': 'jquery',
    })
    .enableSingleRuntimeChunk()
    .addPlugin(new CompressionPlugin())
    .addPlugin(new GenerateSW({swDest:  'sw.js'}))
    .addPlugin(new InjectManifest({
        swSrc: 'sw.js',
        exclude: [
            /\.map$/,
            /manifest$/,
            /\.htaccess$/,
            /service-worker\.js$/,
            /sw\.js$/,
        ],
    }));



module.exports = Encore.getWebpackConfig();

对于 webpack 生成错误我发现了这个：https://github.com/GoogleChrome/workbox/issues/1513 但是

cli generateSW 后出现这个错误：

 error 

Can't find self.__WB_MANIFEST in your SW source.

对于 wb 清单，我发现了这个： Webpack workbox Can't find self.__WB_MANIFEST in your SW source 但对我不起作用

我认为问题来自 webpack 生成的 url，我发现了这个： Can't install service worker of workbox-webpack-plugin in root url for React app, it's installing at localhost:8080/dist 但我看不出它对我的配置有何帮助。

我尝试过使用 path.resolve（因为我在论坛上看到了工作），但对我不起作用，我收到此错误：

Can't find self.__WB_MANIFEST in your SW source.

感谢您的帮助！

Answer 1

import { precacheAndRoute } from 'workbox-precaching';
// Your other import statements go here.

precacheAndRoute(self.__WB_MANIFEST);

在你的 sw.js 上