web-dev-qa-db-fra.com

webpack-dev-server ne surveille pas mes modifications de fichiers

Lorsque je modifie mes fichiers lorsque webpack-dev-server est en cours d'exécution, les fichiers de l'ensemble ne sont pas mis à jour ... résolu en exécutant webpack watch et webpack-dev-server dans la même commande (npm run watch & webpack-dev-server --content-base ./ --port 9966):

webpack.config.js:

'use strict';

var ReactStylePlugin = require('react-style-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');

var webpack = require('webpack');

module.exports = {
    devtool: 'sourcemap',
  entry: ['./js/main.js'],
  output: {
    filename: 'bundle.js',
    path: __dirname + '/assets',
    publicPath: __dirname + '/'
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        loaders: [
          ReactStylePlugin.loader(),
          'jsx-loader?harmony'
        ]
      },
      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract('css-loader')
      }
    ]
  },
  plugins: [
    new ReactStylePlugin('bundle.css'),
    new webpack.DefinePlugin({
      'process.env': {
        // To enable production mode:
        //NODE_ENV: JSON.stringify('production')
      }
    })
  ]
}

package.json:

{
  "name": "reactTest",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "watch": "webpack --watch",
    "build": "webpack",
    "web": "npm run watch &  webpack-dev-server --content-base ./ --port 9966"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^0.10.1",
    "extract-text-webpack-plugin": "^0.3.8",
    "jsx-loader": "^0.13.1",
    "react-style-webpack-plugin": "^0.4.0",
    "style-loader": "^0.10.2",
    "url-loader": "^0.5.5",
    "webpack": "^1.8.5",
    "webpack-dev-server": "^1.8.0"
  },
  "dependencies": {
    "react": "^0.13.1",
    "react-style": "^0.5.3"
  }
}

ma structure de répertoire est:

assets  
  bundle.css
  bundle.css.map    
  bundle.js 
  bundle.js.map 
js
  AppActions.js
  Profile.css.js
  ProfileList.js
  main.js
  AppConstants.js
  AppStore.js       
  Profile.js
  ResultPage.js     
package.json
index.html
node_modules
webpack.config.js

chaque fichier dans le répertoire assets est généré par webpack

npmwebpackwebpack-dev-server
44
Jurgo Boemo

vous devez exécuter webpack-dev-server avec l'indicateur --hot:

webpack-dev-server --content-base ./ --port 9966 --hot

Ensuite, vous pouvez accéder à la version à chargement à chaud localhost: 9966/webpack-dev-server /

Vous n'avez pas besoin de regarder aussi. 

mettre à jour:

Cette entrée dans votre configuration Webpack doit changer:

entry: ['./js/main.js'], -> entry: ['webpack/hot/dev-server' , './js/main.js']

Changez votre entrée publicPath:

publicPath: '/assets/'

36
deowk

Pour que webpack surveille les modifications de mon fichier (Ubuntu 14.04), je devais augmenter le nombre d'observateurs (j'avais déjà augmenté ce nombre auparavant, mais il était encore trop faible):

echo fs.inotify.max_user_watches=524288 | Sudo tee -a /etc/sysctl.conf && Sudo sysctl -p

Source dans la documentation officielle: https://webpack.github.io/docs/troubleshooting.html#not-enough-watchers

J'ai d'abord suspecté la cause d'être fsevents qui ne fonctionne pas sur Ubuntu, mais ce n'était apparemment pas le cas.

En outre, comme l'observation et la recompilation fonctionnaient correctement, mais que la partie d'actualisation automatique du navigateur ne fonctionnait pas, j'ai ajouté le paramètre --inline à la réponse de @deowk, qui active le "mode en ligne": webpack-dev-server --content-base ./ --port 9966 --hot --inline

Extrait de la documentation officielle: "Le moyen le plus simple d'utiliser Hot Module Replacement avec le serveur webpack-dev est d'utiliser le mode en ligne." Source: https://webpack.github.io/docs/webpack -dev-server.html # hot-module-replacement

35
funkybunky

@funkybunky a identifié le bon problème mais (IMHO) l'a corrigé dans le mauvais sens. Au moins dans mon cas, Webpack essayait de regarder tous les fichiers qu'il utilisait, y compris une chaîne profonde de milliers de fichiers de dépendances extraites de npm. J'ai ajouté ceci à ma config, selon la documentation :

devServer: {
  watchOptions: {
    ignored: /node_modules/
  }
}

Bien sûr, vous pourriez légitimement avoir des milliers de fichiers à surveiller. Dans ce cas, augmentez la limite, mais il vaut probablement mieux ignorer les bibliothèques de fournisseurs qui ne risquent pas de changer.

11
Coderer

Je vais mettre ceci ici au cas où cela aiderait quelqu'un. Mon problème était le même, mais dû à une capitalisation incohérente des noms de répertoires et à la déclaration d'alias de Webpack.

J'ai eu un répertoire WebGL que j'ai référencé dans mes alias comme webgl, et malheureusement cela a fonctionné pour la construction, mais n'a pas fonctionné pour l'observation de code.

3
Potter

Dans mon cas, l'erreur était due à un espace vide dans le nom du répertoire, en changeant "Nom du référentiel" par "Nom du référentiel", tout fonctionnait bien!

0
JC.b