如何配置 webpack 开发服务器以将无扩展名文件作为“text/html”提供服务

Question

问题

在开发过程中，没有扩展名的服务文件（例如/region）将使用mimetype“application/octet-stream”提供服务。期望的状态是使用 mimetype 'text/html' 来提供这些服务。

背景

使用Vue3编写多页面应用程序。升级了 @vue/cli 并将 webpack 从 4 升级到 5。使用 webpack4 的开发服务器提供无扩展名文件不会出现此问题。

在生产中这不是问题，因为网络服务器被配置为使用“text/html”mimetype 来提供这些文件。

依赖版本

节点16.13.0，webpack 5.64.1，webpack-dev-middleware 5.2.1，@vue/cli 5.0.0-rc.0

Webpack5 配置

  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'                                                                                                                  
      }                                                                                                                                     
    ), 
  ]

尝试

向 mime 类型映射提供自定义扩展对于自定义扩展来说效果很好，例如

'foo': 'text/html'

会将region.foo 作为html 提供。但是，似乎没有办法为没有扩展名的文件指定 mime 类型。这些 mimeTypes 条目均未成功。

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

Answer 1

您可以使用

webpack-dev-middleware

的mimeTypeDefault选项。

如果您直接使用

webpack-dev-server

而不是

webpack-dev-middleware

，请在您的

webpack.config.js

中使用它：

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

在撰写本文时，这只适用于

webpack-dev-middleware

6.x，其中

webpack-dev-server

尚未更新使用，因此您还需要强制将

webpack-dev-middleware

更新到最新版本（唯一重大更改发生在最低 webpack 和 node 版本中，因此这是安全的）。为此，请将其添加到您的

package.json

:

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

我确信

webpack-dev-server

很快就会更新为使用最新的中间件版本，之后就不需要覆盖了。