title: webpack dev server serves javascript with the text/html mime type
body: <p>I'm trying to add a custom service worker to a React app started with the CRA (Create React App) bootstrapping tool. I've added my custom service-worker Javascript to the build output folder and it is being served by webpack. However, I cannot register it because the webpack dev server is somehow serving the file with the mime type of "text/html". I've ejected my CRA scripts and added custom express configuration to the WebpackDevserver.config.js to mark all files that end with '.js' as text/javascript. I've done this with a before and after hook as follows:</p>
  
  <pre><code>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();
      });
  }
  </code></pre>
  
  <p>For some reason the mime type is still being received on the browser as "text/html" even after I confirm in a server debug session that the header is properly being set in the before hook. I was initially just using a before hook but then I added the after hook when I saw the content type was still being received in the browser with the "text/html" mime type. I get no breakpoint hits in the after hook so I cannot confirm that it is wired up or firing. </p>
  
  <p>Is there a better way to do this? I really don't want to eject my CRA app. I've seen this as a common thread while Googling for advice. Apparently there is a project which can work around the pain of adding a custom service worker without ejecting but I haven't tried it. Looking through the source, I can't see how it would even work since it doesn't appear to adjust any webpack dev server configs. Please advise.</p>