service-worker - How to Correctly Provide swDest?

Question

I have installed workbox-cli

and using the config below, located in config.js

const {InjectManifest} = require('workbox-webpack-plugin');
const path = require('path');

module.exports = {
  webpack: function(config, env) {
    config.plugins.push(
      new InjectManifest({
        globPatterns: ['**/*.{js,css}'],
        swSrc: path.join('public', 'custom-service-worker.js'),
        swDest: 'service-worker.js',
        maximumFileSizeToCacheInBytes: 5000000,
      })
    );
    return config;
  }
} 

and then running

workbox generateSW config.js

I get

Your configuration is invalid:

{ "webpack": function(config, env) {\n config.plugins.push(\n new InjectManifest({\n >globPatterns: ['**/*.{js,css}'],\n swSrc: path.join('public', 'custom-service->worker.js'),\n swDest: 'service-worker.js',\n maximumFileSizeToCacheInBytes: >5000000,\n })\n );\n return config;\n }, "swDest" [1]: -- missing -- }

[1] "swDest" is required

I am not sure what else to do because I am providing swDest

Answer 1

从我的角度来看，它看起来不错。我唯一想到的就是尝试将 publicPath 设置为''。我正在使用 laravel-mix 所以这是我的配置。

mix.webpackConfig(webpack => {
    return {
        plugins: [
            new WorkboxPlugin.InjectManifest({
                swSrc: './public/sw.js',
                swDest: 'service-worker.js',
                maximumFileSizeToCacheInBytes: 5*1024*1024,
            })
        ],
        output: {
            publicPath: ''
        }
    };
});