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

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.

¿Qué me estoy perdiendo?

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'}
        ]
    }
};

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"
  }....

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
  }
};

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 .

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

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

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.

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.

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.

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í.

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