Webpack-dev-server compila archivos pero no actualiza ni hace que el javascript compilado esté disponible para el navegador


82

Estoy tratando de usar webpack-dev-server para compilar archivos e iniciar un servidor web dev.

En mi package.json, tengo la propiedad de script establecida en:

"scripts": {
  "dev": "webpack-dev-server --hot --inline",
 }

Entonces el --hoty--inline debería habilitar el servidor web y la recarga en caliente (según tengo entendido).

En mi webpack.config.jsarchivo configuro la configuración de entrada, salida y devServer, además de agregar un cargador para buscar cambios en los .vuearchivos:

module.exports = {
    entry: './src/index.js',
    output: {
        path: __dirname + '/public',
        publicPath: '/public',
        filename: 'bundle.js'
    },
    devtool: 'source-map',
    devServer:{
        contentBase: __dirname + '/public'
    },
    module:{
        loaders:[
            { test: /\.vue$/, loader: 'vue'}
        ]
    }
};

Entonces, con esta configuración, corro npm run dev. El servidor webpack-dev-server se inicia, la prueba del cargador de módulos funciona (es decir, cuando guardo cualquier archivo .vue hace que webpack se recompile), pero:

  • El navegador nunca se actualiza
  • El javascript compilado que se almacena en la memoria nunca está disponible para el navegador.

En esa segunda viñeta, puedo ver esto porque en la ventana del navegador los marcadores de posición de vue nunca se reemplazan y si abro la consola de JavaScript, la instancia de Vue nunca se crea ni se hace disponible a nivel mundial.

GIF de emisión

¿Qué me estoy perdiendo?


Creo que no ha hecho que su paquete web funcione correctamente, falta bundle.js en la consola de su navegador. Después de eso, debería tener una mirada clara a los documentos de reemplazo de módulos calientes webpack.github.io/docs/… , sugiero que comience con el modo CLI primero
mygoare

6
Leí la documentación mientras la estaba construyendo y personalmente encuentro la explicación un poco complicada. Además, cuando revisé el ejemplo que dan en un proyecto nuevo, no funciona. Dicho esto, hice algunas pruebas de aislamiento de componentes y descubrí qué había con la configuración. Voy a escribir una respuesta detallada hoy en el almuerzo.
Chris Schmitz

Respuestas:


65

Dos cosas estaban causando mis problemas aquí:

module.exports = {
    entry: './src/index.js',
    output: {

        // For some reason, the `__dirname` was not evaluating and `/public` was
        // trying to write files to a `public` folder at the root of my HD.
        path: __dirname + '/public', 

        // Public path refers to the location from the _browser's_ perspective, so 
        // `/public' would be referring to `mydomain.com/public/` instead of just
        // `mydomain.com`.
        publicPath: '/public',
        filename: 'bundle.js'
    },
    devtool: 'source-map',
    devServer:{

        // `contentBase` specifies what folder to server relative to the 
        // current directory. This technically isn't false since it's an absolute
        // path, but the use of `__dirname` isn't necessary. 
        contentBase: __dirname + '/public'
    },
    module:{
        loaders:[
            { test: /\.vue$/, loader: 'vue'}
        ]
    }
};

Aquí está el fijo webpack.config.js:

var path = require('path');

module.exports = {
    entry: [
        './src/PlaceMapper/index.js'
    ],
    output:{
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'public/')
    },
    devtool: 'source-map',
    devServer:{
        contentBase: 'public'
    },
    module:{
        loaders:[
            { test: /\.vue$/, loader: 'vue'}
        ]
    }
};

8
La opción "publicPath" es la parte más confusa para el servidor de desarrollo. Reglas generales: si no configuró "publicPath" en el bloque "salida" (configuración del paquete web), no configure la opción "publicPath" para su servidor de desarrollo
Alan

Gracias por mencionar la opción "publicPath". ¡Esto realmente me ayudó!
Benny Neugebauer

3
¡Los chicos del paquete web deberían tenerlo en su nómina! Esta es, con mucho, la mejor documentación sobre cómo configurar el servidor que he visto incluso un año después.
Ernie S


medium.com/code-oil/… esto me ayudó a entender por qué no estaba funcionando. En mi caso, tenía publicPath configurado en '/' cuando debería haber sido '/ js-lib /' y esa es la razón por la que nunca estaba seleccionando cambios de archivo, porque estaba sirviendo archivos estáticos en js-lib en lugar de en la memoria archivo en 'http: localhost: 9001' + '/' (su host webpack-dev-server + publicPath)
Herz3h

20

Después de una larga búsqueda encontré la solución a mi problema, en mi caso, la ruta de salida no estaba configurada correctamente.

Esta configuración resolvió mi problema:

const path = require('path');

module.exports = {
  "entry": ['./app/index.js'],
  "output": {
    path: path.join(__dirname, 'build'),
    publicPath: "/build/",
    "filename": "bundle.js"
  }....

8
Agregar la propiedad publicPath lo solucionó para mí
Borjante

13

la solucion correcta

Dile dev-serverque mire los archivos servidos por la opción devServer.watchContentBase .

Está deshabilitado por defecto.

Cuando está habilitado, los cambios de archivo activarán una recarga de página completa .

Ejemplo:

module.exports = {
  //...
  devServer: {
    // ...
    watchContentBase: true
  }
};

2
Lo he intentado por horas, tu sugerencia finalmente funciona. Estimados desarrolladores: En realidad, HMR trabajó para mi proyecto. Pero asocié webpack-dev-server con firebase-serve a través de proxy. Cuando aplico esta sugerencia, mi problema se ha resuelto. Así que gracias.
Arda Zaman

4

Tuve el mismo problema y descubrí que además de todos esos puntos, también tenemos que poner el index.html junto con el bundle.js de salida en la misma carpeta y configurar el contentBase en esta carpeta, ya sea la raíz o una subcarpeta .


4

De alguna manera, en mi caso, eliminar "--hot" hace que funcione. Entonces, eliminéhot: true

webpack.dev.js

module.exports = merge(common, {
  mode: 'development',
  devtool: 'inline-source-map',
  devServer: {
    publicPath: '/js/',
    contentBase: path.resolve(__dirname, 'docs'),
    watchContentBase: true,
  }
});

webpack.common.js

  output: {
    path: path.resolve(__dirname, 'docs/js'),
    filename: '[name].min.js',
    library: ['[name]']
  },

3

Puede suceder debido a ExtractTextPlugin . Desactive ExtractTextPlugin en modo de desarrollo. Úselo solo para compilación de producción.


Este era mi problema. Aparentemente, en la documentación de ExtraTextPlugin se indica que no admite la recarga en caliente. Sin embargo, es posible que desee probar esto: stackoverflow.com/a/49932664/1319182
user1319182

1

Esto también me sucedió después de ejecutar dos aplicaciones diferentes en el mismo webpack-dev-serverpuerto una tras otra. Esto sucedió a pesar de que el otro proyecto se cerró. Cuando cambié a un puerto que no se había utilizado, comenzó a funcionar directamente.

devServer: {
    proxy: {
        '*': {
            target: 'http://localhost:1234'
        }
    },
    port: 8080,
    host: '0.0.0.0',
    hot: true,
    historyApiFallback: true,
},

Si usa Chrome como yo, simplemente abra Developer Toolsy haga clic en Clear site data. También puede ver si este es el problema ejecutando el sitio en modo incógnito.

ingrese la descripción de la imagen aquí


Esto también me pasó a mí, excepto que también tuve que reiniciar Chrome.
Andrea Rosales

El reinicio de Chrome también ayudó
Vlad Isajkin

0

Mi caso fue que me sumergí tanto en experimentar con las funciones de Webpack, pero olvidé por completo que había configurado inyectar para que fuera falso todo el tiempo, así ...

 new HTMLWebpackPlugin({
        inject: false,
        ...
 }),

Encender eso era mi boleto.


0

Experimenté una situación similar en la que webpack-dev-serverestaba sirviendo mi index.htmlarchivo pero no actualizándolo. Después de leer algunas publicaciones, me di cuenta de que webpack-dev-serverno genera un nuevo archivo js, ​​sino que inyecta uno en index.html.

Agregué el html-webpack-plugina mi aplicación y con la siguiente configuración en mi webpack.config.jsarchivo:

const HtmlWebpackPlugin = require('html-webpack-plugin')

plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      inject: true
    })
  ]

Luego comenté la etiqueta de script que hace referencia a mi archivo js de entrada en formato index.html. Ahora puedo ejecutar webpack-dev-serversin indicadores adicionales y cualquier cambio en mis archivos se mostrará en el navegador al instante.


0

Agregaré mi propia historia especial de la --watchaflicción de Webpack al muro de sufrimiento aquí.

Yo estaba corriendo

webpack --watch

para construir un proyecto de TypeScript. Los .jsarchivos compilados se actualizarían, pero el paquete que estaba viendo el navegador no. Así que básicamente estaba en la misma posición que el OP.

Mi problema se redujo al watchOptions.ignoredparámetro. El autor original de la configuración de compilación se había configurado ignoredcomo una función de filtro, lo que resulta no ser un valor válido para ese parámetro. Reemplazar la función de filtro con una adecuada RegExphizo que la --watchcompilación funcionara nuevamente para mí.


0

El árbol de su proyecto no está claro, sin embargo, el problema puede estar en la configuración de contentBase. Intente configurar contentBase: __dirname

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.