webpack开发服务器为javascript提供text/html mime类型
我正在尝试向使用CRA (Create React App) bootstrapping工具启动的React应用程序添加自定义服务工作者。我已经将我的自定义服务工作者Javascript添加到了构建输出文件夹中，它由webpack提供服务。但是，我无法注册它，因为webpack开发服务器正在以某种方式提供mime类型为"text/html“的文件。我已经弹出了CRA脚本，并在WebpackDevserver.config.js中添加了自定义的快速配置，以便将所有以'.js‘结尾的文件标记为文本/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();
});
}由于某些原因，即使我在服务器调试会话中确认在之前的钩子中正确地设置了头之后，浏览器仍然以"text/html“的形式接收到mime类型。我最初只使用了一个before钩子，但后来我添加了after钩子，当我看到内容类型仍然在浏览器中使用"text/html“mime类型接收时。我在after钩子中没有得到断点命中，所以我不能确认它是连接的还是触发的。
有没有更好的方法来做这件事？我真的不想弹出我的CRA应用程序。当我在谷歌上寻求建议时，我把这看作是一个常见的主题。显然，有一个项目可以在不弹出的情况下解决添加自定义服务工作人员的难题，但我还没有尝试过。翻阅源代码，我甚至看不出它是如何工作的，因为它似乎没有调整任何webpack开发服务器的配置。请给我建议。
回答 1
Stack Overflow用户
发布于 2018-09-12 03:54:32
我刚刚意识到我的问题是在公共目录中定位我的服务工作者文件，而不是在构建输出文件夹中。(因为我也使用build文件夹在我的电视机上部署应用程序，所以我遇到了麻烦。)实际上，webpack从来没有找到我的自定义服务工作者js文件，而是提供默认的html索引页面。将文件定位在适当的位置就是我需要做的所有事情，而且我根本不需要弹出。
https://stackoverflow.com/questions/52282183
复制相似问题
腾讯云开发者
