webpack dev服务器提供带有text / html mime类型的javascript

Question

我正在尝试将自定义服务工作者添加到以CRA（创建React App）引导工具启动的React应用程序中。我已将我的自定义服务工作者Javascript添加到构建输出文件夹，它正由webpack提供。但是，我无法注册它，因为webpack开发服务器以某种方式提供mime类型为“text / html”的文件。我已经弹出了我的CRA脚本，并在WebpackDevserver.config.js中添加了自定义快速配置，以将所有以'.js'结尾的文件标记为text / javascript。我用挂钩前后挂钩做了如下：

before(app) {
  app.use(function jsContentTypeMiddleware(req, res, next) {
      if (req.url.endsWith('.js')) {
        res.setHeader('Content-Type', 'text/javascript');
      }
      next();
    });
  // This lets us open files from the runtime error overlay.
  app.use(errorOverlayMiddleware());
  // This service worker file is effectively a 'no-op' that will reset any
  // previous service worker registered for the same host:port combination.
  // We do this in development to avoid hitting the production cache if
  // it used the same host and port.
  // https://github.com/facebookincubator/create-react-app/issues/2272#issuecomment-302832432
  app.use(noopServiceWorkerMiddleware());
},
after(app) {
  app.use(function jsContentTypeMiddleware(req, res, next) {
      if (req.url.endsWith('.js')) {
        res.setHeader('Content-Type', 'text/javascript');
      }
      next();
    });
}

由于某种原因，即使在我在服务器调试会话中确认在前钩子中正确设置了头部之后，mime类型仍然在浏览器上被接收为“text / html”。我最初只是使用了一个前钩子，但是当我看到内容类型仍然在浏览器中使用“text / html”mime类型时，我添加了后钩子。我在钩子后没有断点命中，所以我无法确认它是连线还是开火。

有一个更好的方法吗？我真的不想弹出我的CRA应用程序。谷歌搜索建议时，我已经看到这是一个共同点。显然有一个项目可以解决添加自定义服务工作者而不弹出的痛苦，但我还没有尝试过。通过源代码查看，我看不出它是如何工作的，因为它似乎没有调整任何webpack开发服务器配置。请指教。

Answer 1

我刚刚意识到我的问题是将我的服务工作者文件放在公共目录中，而不是构建输出文件夹。 （我正在接通电线，因为我使用构建文件夹在我的电视机上部署应用程序。）实际上，webpack从未找到我的自定义服务工作者js文件，而是提供默认的html索引页面。将文件放在适当的位置是我需要做的所有事情，我根本不需要弹出。