webpack-dev-server let niet op mijn bestandswijzigingen

Als ik mijn bestanden wijzig terwijl webpack-dev-server actief is, worden de bestanden van de bundel niet bijgewerkt.
Hier zijn mijn webpack.config.js- en package.json-bestanden, zoals je kunt zien in mijn npm-script, heb ik opgelost door webpack watchen webpack-dev-serveruit te voeren in hetzelfde commando (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')
      }
    })
  ]
}

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

mijn directorystructuur is:

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

elk bestand in de assetsdirectory wordt gegenereerd door webpack

Antwoord 1, autoriteit 100%

Om webpack mijn bestandswijzigingen te laten bekijken (Ubuntu 14.04), moest ik het aantal kijkers verhogen (ik had het aantal eerder verhoogd, maar het was nog steeds te laag):

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

Bron in de officiële documenten: https://webpack.github. io/docs/troubleshooting.html#not-enough-watchers

Ik vermoedde eerst dat de oorzaak fseventswas, wat niet werkt op Ubuntu, maar dit was blijkbaar niet het geval.

Bovendien, omdat het bekijken en opnieuw compileren werkte, maar het automatische browserverversingsgedeelte niet werkte, heb ik de param --inlinetoegevoegd aan het antwoord van @deowk, waardoor de ” inline-modus”:
webpack-dev-server --content-base ./ --port 9966 --hot --inline

Citaat uit de officiële documenten: “De gemakkelijkste manier om Hot Module Replacement te gebruiken met de webpack-dev-server is om de inline-modus te gebruiken.”
Bron: https://webpack.github.io/docs /webpack-dev-server.html#hot-module-replacement

Antwoord 2, autoriteit 93%

je moet webpack-dev-server draaien met de –hot vlag:

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

Dan heb je toegang tot de hot-loading versie localhost:9966/webpack-dev-server/

U hoeft de horloge niet ook te laten lopen.

bijwerken:

Dit item in uw webpack-configuratie moet veranderen:

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

Wijzig uw publicPath-invoer:

publicPath: '/assets/'

Antwoord 3, autoriteit 35%

@funkybunky heeft het juiste probleem geïdentificeerd, maar (IMHO) op de verkeerde manier opgelost. In mijn geval probeerde webpack elk bestand dat het gebruikte te bekijken, inclusief een diepe keten van duizenden bestanden met afhankelijkheden die uit npmwaren gehaald. Ik heb dit toegevoegd aan mijn configuratie, volgens de documenten:

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

Natuurlijk zou je legitiem duizenden bestanden kunnen hebben die moeten worden bekeken, in dat geval ga je gang en verhoog je de limiet, maar je kunt waarschijnlijk beter leveranciersbibliotheken negeren die waarschijnlijk niet zullen veranderen.

Antwoord 4, autoriteit 12%

Ik zal dit hier plaatsen voor het geval iemand er iets aan heeft. Mijn probleem was hetzelfde, maar veroorzaakt door inconsistent hoofdlettergebruik van directorynamen en webpack-aliasdeclaratie.

Ik had een webgl-directory waarnaar ik in mijn aliassen verwees als webgl, en helaas werkte dit voor de build, maar niet voor het bekijken van code.

p>

Antwoord 5

In mijn geval werd de fout veroorzaakt door een lege ruimte in de mapnaam, door “Repository Name” te wijzigen in “RepositName”, werkte alles prima!