无法在React应用程序的根url中安装workbox-webpack-plugin的服务人员，它正在本地主机上安装:8080/dist

Question

我一直跟随许多教程如何安装工作箱-webpack插件，但我没有成功地成功地安装它。服务工作者似乎正在安装，但安装在我的应用程序的dist文件夹中(这是我的webpacks输出路径)。我认为这没有什么问题，但当我运行我的应用程序时，没有错误，但是服务工作者没有工作，我注意到它正在本地主机上安装:8080/dist(输出路径)，即使我尝试在heroku免费服务器上运行它，它也安装在url "https://myherokuapp.com/dist“(相同的输出路径)上，我无法找到修复方法，并认为这可能与另一个webpack模块有关？

这是我的webpack配置：

module.exports = (env) => {
  const isProduction = env === 'production';
  const CSSExtract = new ExtractTextPlugin('styles.css');

  return {
    entry: ['babel-polyfill', './src/app.js'],
    output: {
      path: path.join(__dirname, 'public', 'dist'),
      filename: 'bundle.js'
    },
    module: {
      rules: [{
        loader: 'babel-loader',
        test: /\.js$/,
        exclude: /node_modules/
      }, {
        test: /\.s?css$/,
        use: CSSExtract.extract({
          use: [
            {
              loader: 'css-loader',
              options: {
                sourceMap: true
              }
            },
            {
              loader: 'sass-loader',
              options: {
                sourceMap: true
              }
            }
          ]
        })
      }]
    },
    plugins: [
      CSSExtract,
      new webpack.DefinePlugin({
        'process.env.FIREBASE_API_KEY': JSON.stringify(process.env.FIREBASE_API_KEY),
        'process.env.FIREBASE_AUTH_DOMAIN': JSON.stringify(process.env.FIREBASE_AUTH_DOMAIN),
        'process.env.FIREBASE_DATABASE_URL': JSON.stringify(process.env.FIREBASE_DATABASE_URL),
        'process.env.FIREBASE_PROJECT_ID': JSON.stringify(process.env.FIREBASE_PROJECT_ID),
        'process.env.FIREBASE_STORAGE_BUCKET': JSON.stringify(process.env.FIREBASE_STORAGE_BUCKET),
        'process.env.FIREBASE_MESSAGING_SENDER_ID': JSON.stringify(process.env.FIREBASE_MESSAGING_SENDER_ID)
      }),
      new CopyWebpackPlugin([
      {
        from: './public/index.html',
        to: 'index.html'
      }
      ]),
      new WorkboxPlugin.InjectManifest({
        swSrc: './public/sw.js',
        swDest: 'service-worker.js'
      })
    ],
    devtool: isProduction ? 'source-map' : 'inline-source-map',
    devServer: {
      contentBase: path.join(__dirname, 'public'),
      historyApiFallback: true,
      publicPath: '/dist/'
    }
  };
};

我提供给swSrc工作箱的服务人员：

workbox.routing.registerNavigationRoute('https://my-app123.herokuapp.com/dashboard');

workbox.skipWaiting();

workbox.precaching.precacheAndRoute(self.__precacheManifest);

我的舱单：

{
    "dir": "ltr",
    "lang": "ES",
    "name": "PWAPRB",
    "icons": [
        {
          "src": "/images/icons/app-icon-48x48.png",
          "type": "image/png",
          "sizes": "48x48"
        },
        {
          "src": "/images/icons/app-icon-96x96.png",
          "type": "image/png",
          "sizes": "96x96"
        },
        {
          "src": "/images/icons/app-icon-144x144.png",
          "type": "image/png",
          "sizes": "144x144"
        },
        {
          "src": "/images/icons/app-icon-192x192.png",
          "type": "image/png",
          "sizes": "192x192"
        },
        {
          "src": "/images/icons/app-icon-256x256.png",
          "type": "image/png",
          "sizes": "256x256"
        },
        {
          "src": "/images/icons/app-icon-384x384.png",
          "type": "image/png",
          "sizes": "384x384"
        },
        {
          "src": "/images/icons/app-icon-512x512.png",
          "type": "image/png",
          "sizes": "512x512"
        }
      ],
    "display": "standalone",
    "start_url": "https://my-app123.herokuapp.com/dashboard",
    "scope": ".",
    "short_name": "PRBW",
    "theme_color": "#204080",
    "orientation": "any",
    "background_color": "#204080",
    "related_applications": [],
    "prefer_related_applications": false
}

这是SW的注册，我看到它安装在/dist url中。

​

​

我真的很感激任何帮助，因为我对webpack和工作箱非常陌生，而且我完全被困住了。谢谢大家！

Answer 1

问题在于您的服务工作者的scope。因为sw位于dist/内部，所以它只能控制对/dist/`文件夹中的资源的请求。

我建议您的index.html使用HTMLWebpackPlugin，然后由Webpack处理，并在dist/中结束，然后部署dist/文件夹