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

Viewed 339

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',                                                                                                                   
      }                                                                                                                                     
    }                                                                                                                                       
  }  
0 Answers
Related