es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

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’,
}
}
}

Tags:  , , ,

Answer

  1. Avatar for davy.ai

    Solución

    La solución fue agregar la opción historyApiFallback a la configuración de devServer en webpack.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 deseado text/html.

Comments are closed.