Cómo configurar el servidor de desarrollo de webpack para que sirva archivos sin extensión como “text/html”
Problema
En el desarrollo, los archivos sin extensión (por ejemplo, /region) se están sirviendo con el tipo MIME ‘application/octet-stream’. El estado deseado es servirlos con el tipo MIME ‘text/html’.
Contexto
Se está escribiendo una aplicación multipágina usando Vue3. Se actualizó @vue/cli y esto actualizó webpack de la versión 4 a la versión 5. En la versión 4 de webpack, el servidor de desarrollo no tenía problemas al servir archivos sin extensión.
En producción esto no es un problema ya que el servidor web está configurado para servir estos archivos con el tipo MIME ‘text/html’.
Versiones de dependencias
node 16.13.0, webpack 5.64.1, webpack-dev-middleware 5.2.1, @vue/cli 5.0.0-rc.0
Configuración de 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'
}
),
]
Intentos
Proporcionar una asignación de tipo MIME personalizada para extensiones personalizadas funciona sin problemas, por ejemplo, ‘foo’: ‘text/html’ servirá region.foo como html. Sin embargo, no parece haber una forma de especificar un tipo MIME para archivos sin extensión. Ninguna de estas entradas de mimeTypes ha sido exitosa.
js
// webpack.config.js
devServer: {
devMiddleware: {
mimeTypes: {
”: ‘text/html’,
false: ‘text/html’,
null: ‘text/html’,
default: ‘text/html’,
}
}
}
davy.ai
Solución
La solución fue agregar la opción
historyApiFallback
a la configuración dedevServer
enwebpack.config.js
:js
devServer: {
historyApiFallback: true,
devMiddleware: {
mimeTypes: {
'': 'text/html',
false: 'text/html',
null: 'text/html',
default: 'text/html',
}
}
}
Esto permitió que
webpack-dev-middleware
sirviera los archivos sin extensión con el mimetype deseadotext/html
.