How to configure webpack dev server to serve extensionless files as 'text/html'

Question

Problem

In development, serving files without an extension (e.g. /region) are being served with mimetype `application/octet-stream'. Desired state is to serve these with mimetype 'text/html'.

Context

Writing a multipage application using Vue3. Upgraded @vue/cli and that upgraded webpack from 4 to 5. Serving extensionless files did not have this issue using webpack4's dev server.

In production this isn't a problem as the webserver there is configured to serve these files with the 'text/html' mimetype.

Dependency versions

node 16.13.0, webpack 5.64.1, webpack-dev-middleware 5.2.1, @vue/cli 5.0.0-rc.0

Webpack5 config

  entry: {                                                                                                                                                                                                                                                                    
    region: [                                                                                                                               
      '/home/alice/workspace/vapp/src/pages/region/main.js'                                                                              
    ], 
  plugins: [
    /* config.plugin('html-region') */                                                                                                      
    new HtmlWebpackPlugin(                                                                                                                  
      {                                                                                                                                     
        title: 'Region',                                                                                                              
        scriptLoading: 'defer',                                                                                                             
        templateParameters: function () { /* omitted long function */ },                                                                    
        chunks: [                                                                                                                           
          'chunk-vendors',                                                                                                                  
          'chunk-common',                                                                                                                   
          'region'                                                                                                                          
        ],                                                                                                                                  
        template: 'src/pages/region/region.html',                                                                                           
        filename: 'region'                                                                                                                  
      }                                                                                                                                     
    ), 
  ]

Attempts

Supplying custom extension to mime type mapping works for custom extensions just fine, e.g. 'foo': 'text/html' will serve region.foo as html. However, there doesn't appear to be a way to specify a mime type for files without an extension. None of the these mimeTypes entries have been successful.

  // webpack.config.js
  devServer: {                                                                                                                              
    devMiddleware: {                                                                                                                        
      mimeTypes: {                                                                                                                          
        '': 'text/html',                                                                                                                    
        false: 'text/html',                                                                                                                                                                                                                                 
        null: 'text/html',
        default: 'text/html',                                                                                                                   
      }                                                                                                                                     
    }                                                                                                                                       
  }  

Answer 1

You can use the mimeTypeDefault option of webpack-dev-middleware.

If you're using webpack-dev-server instead of webpack-dev-middleware directly, then use this in your webpack.config.js:

module.exports = {
    devServer: {
        devMiddleware: {
            mimeTypeDefault: 'text/html'
        },
    },
};

At the time of writing this only works with the webpack-dev-middleware 6.x, which webpack-dev-server hasn't been updated to use yet, so you will also need to forcibly update the webpack-dev-middleware to the latest version (the only breaking changes are in minimum webpack and node versions, so this is safe). To do this add this to your package.json:

  "overrides": {
    "webpack-dev-server": {
      "webpack-dev-middleware": "^6.1.1"
    }
  }

I'm sure webpack-dev-server will be updated to use the latest middleware version soon, after which the override won't be necessary.