Workbox Webpack Plugin v3.01路径错误：Service Worker输出配置求助

针对你遇到的workbox.precaching.prod.js加载路径错误、Service Worker输出位置和资源引用路径的问题，结合Webpack v3.11的配置，我给你整理了具体的解决方案：

1. 调整Webpack的Output配置 #

首先确保你的output配置里的publicPath设置为网站根目录下的dist路径，这样所有打包资源的引用都会基于根目录，不会带有wwwroot前缀：

const path = require('path');
const bundleOutputDir = "./wwwroot/dist";

module.exports = {
  // ...其他配置
  output: {
    path: path.join(__dirname, bundleOutputDir),
    filename: "[name].js",
    // 设置为根目录下的dist路径，部署后对应网站根的/dist/
    publicPath: '/dist/'
  },
  // ...
};

2. 配置Workbox Plugin输出Service Worker到wwwroot目录 #

因为你需要把Service Worker直接输出到wwwroot（部署后作为网站根目录），所以在Workbox Plugin的配置里指定swDest为wwwroot下的sw.js，同时调整importWorkboxFrom的路径，确保workbox.precaching.prod.js的引用正确：

const WorkboxPlugin = require('workbox-webpack-plugin');

module.exports = {
  // ...其他配置
  plugins: [
    new WorkboxPlugin.GenerateSW({
      // 指定Service Worker输出到wwwroot目录
      swDest: path.join(__dirname, './wwwroot/sw.js'),
      // 让Workbox从dist目录加载它的核心脚本，对应publicPath的设置
      importWorkboxFrom: 'dist',
      // 确保precache清单里的资源路径正确（基于根目录）
      modifyUrlPrefix: {
        // 如果webpack生成的路径带有前缀，这里可以调整，比如如果是'./dist/'就改成'/dist/'
        './dist/': '/dist/'
      },
      // 缓存index.html，因为它在wwwroot目录（根目录）
      runtimeCaching: [
        {
          urlPattern: '/',
          handler: 'StaleWhileRevalidate',
          options: {
            cacheName: 'html-cache'
          }
        }
      ],
      // 其他需要的配置，比如自动接管客户端
      skipWaiting: true,
      clientsClaim: true
    })
  ]
};

3. 修正index.html中Service Worker的注册路径 #

在你的index.html（位于wwwroot目录）里，注册Service Worker的路径要直接用/sw.js，因为部署后wwwroot就是网站的根目录：

if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/sw.js')
      .then(registration => {
        console.log('SW registered: ', registration);
      })
      .catch(registrationError => {
        console.log('SW registration failed: ', registrationError);
      });
  });
}

关键说明 #

• importWorkboxFrom: 'dist'：这个配置会让Workbox在生成的sw.js里从/dist/workbox.precaching.prod.js加载核心脚本，刚好对应你打包资源的输出目录，解决路径错误的问题。
• modifyUrlPrefix：如果Webpack生成的precache清单里资源路径是相对路径（比如./dist/main.js），通过这个配置把它改成绝对路径/dist/main.js，确保Service Worker能正确找到资源。
• 部署时，直接把wwwroot目录下的所有内容放到服务器的根目录，这样所有资源引用和Service Worker路径都是正确的，不会有wwwroot相关的残留引用。

内容的提问来源于stack exchange，提问作者Kyle Reed