webentwicklung-frage-antwort-db.com.de

webpack-dev-server überwacht meine Dateiveränderungen nicht

Wenn ich meine Dateien ändere, während der webpack-dev-server läuft, werden die Dateien des Bundles nicht aktualisiert. Hier sind meine Dateien webpack.config.js und package.json, wie Sie aus meinem npm-Skript entnehmen können Problem mit webpack watch und webpack-dev-server im selben Befehl (npm run watch & webpack-dev-server --content-base ./ --port 9966) ausgeführt:

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

meine Verzeichnisstruktur ist:

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

jede Datei im Verzeichnis assets wird vom Webpack generiert

44
Jurgo Boemo

sie müssen den webpack-dev-server mit dem Flag --hot ausführen:

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

Dann können Sie auf die Hot-Loading-Version localhost zugreifen: 9966/webpack-dev-server /

Sie müssen nicht auch zusehen. 

aktualisieren:

Dieser Eintrag in Ihrer Webpack-Konfiguration muss geändert werden:

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

Ändern Sie Ihren publicPath-Eintrag:

publicPath: '/assets/'

36
deowk

Um das Webpack dazu zu bringen, meine Dateiänderungen anzusehen (Ubuntu 14.04), musste ich die Anzahl der Beobachter erhöhen (ich hatte die Anzahl zuvor erhöht, war aber immer noch zu niedrig):

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

Quelle in den offiziellen Dokumenten: https://webpack.github.io/docs/troubleshooter.html#not-enough-watchers

Ich hatte zuerst den Verdacht, dass es sich um fsevents handelt, was auf Ubuntu nicht funktioniert, aber das war anscheinend nicht der Fall.

Da das Anschauen und Neukompilieren nun funktioniert hat, aber der automatische Browser-Aktualisierungsabschnitt nicht funktioniert hat, habe ich --inline param zur Antwort von @deowk hinzugefügt, die den "Inline-Modus" aktiviert: webpack-dev-server --content-base ./ --port 9966 --hot --inline

Zitat aus den offiziellen Dokumenten: "Die einfachste Möglichkeit, Hot Module Replacement mit dem Webpack-Dev-Server zu verwenden, ist der Inline-Modus." Quelle: https://webpack.github.io/docs/webpack -dev-server.html # Hot-Modul-Ersetzung

35
funkybunky

@funkybunky hat das richtige Problem erkannt, aber (IMHO) hat den falschen Weg gefunden. Zumindest in meinem Fall versuchte webpack, jede verwendete Datei zu überwachen, einschließlich einer tiefen Kette von Tausenden von Dateien mit Abhängigkeiten, die aus npm abgerufen wurden. Ich habe dies meiner Konfig hinzugefügt, per docs :

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

Natürlich könnten Sie tausende von Dateien haben, die möglicherweise angesehen werden müssen. In diesem Fall sollten Sie die Obergrenze erhöhen. Sie sollten jedoch wahrscheinlich die Bibliotheken von Anbietern ignorieren, die sich wahrscheinlich nicht ändern werden.

11
Coderer

Ich lege das hier nur für den Fall, dass es jemandem hilft. Mein Problem war das gleiche, wurde aber durch inkonsistente Großschreibung von Verzeichnisnamen und Webpack-Alias-Deklaration verursacht.

Ich hatte ein WebGL -Verzeichnis, auf das ich in meinen Aliasnamen als webgl verwies, und leider funktionierte dies für den Build, aber nicht für die Codeüberwachung.

3
Potter

In meinem Fall wurde der Fehler durch ein leeres Feld im Verzeichnisnamen verursacht. Durch Ändern von "Repository-Name" durch "RepositoryName" funktionierte alles einwandfrei!

0
JC.b