web-dev-qa-db-ja.com

webpack-dev-serverはファイルの変更を監視しません

Webpack-dev-serverの実行中にファイルを変更しても、バンドルのファイルは更新されません。ここに私のwebpack.config.jsファイルとpackage.jsonファイルがあります。npmスクリプトからわかるように、同じコマンド（webpack watch）でwebpack-dev-serverと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"
  }
}

私のディレクトリ構造は次のとおりです。

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

assetsディレクトリ内のすべてのファイルはwebpackによって生成されます

npmwebpackwebpack-dev-server
47
Jurgo Boemo

--hotフラグを指定してwebpack-dev-serverを実行する必要があります。

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

その後、ホットロードバージョンlocalhost：9966/webpack-dev-server /にアクセスできます

ウォッチを実行する必要もありません。

更新：

Webpack設定のこのエントリは変更する必要があります。

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

PublicPathエントリを変更します。

publicPath: '/assets/'

39
deowk

Webpackにファイルの変更（Ubuntu 14.04）を監視させるには、ウォッチャーの数を増やす必要がありました（以前は数を増やしていましたが、まだ低すぎました）。

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

公式ドキュメントのソース： https://webpack.github.io/docs/troubleshooting.html#not-enough-watchers

私は最初、原因がfseventsであると疑っていましたが、これはUbuntuでは機能しませんが、明らかにそうではありませんでした。

さらに、監視と再コンパイルは機能したが、ブラウザの自動更新部分が機能しなかったため、「インラインモード」を有効にする@deowkの回答に--inline paramを追加しました：webpack-dev-server --content-base ./ --port 9966 --hot --inline

公式ドキュメントからの引用：「webpack-dev-serverでHot Module Replacementを使用する最も簡単な方法は、インラインモードを使用することです。」ソース： https://webpack.github.io/docs/webpack-dev-server.html#hot-module-replacement

40
funkybunky

@funkybunkyは正しい問題を特定しましたが、（IMHO）それを間違った方法で修正しました。少なくとも私の場合、webpackは、npmから取得した依存関係の数千のファイルの深いチェーンを含め、使用したすべてのファイルを監視しようとしていました。これを設定に追加しました ドキュメントごと ：

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

もちろん、監視する必要があるかもしれない数千のファイルを合法的に持っている可能性があり、その場合は先に進んで制限を上げますが、おそらく変更しない可能性のあるベンダーライブラリを無視する方が良いでしょう。

14
Coderer

誰かを助けるためにここにこれを置きます。私の問題は同じでしたが、ディレクトリ名とwebpackエイリアス宣言の大文字と小文字が一致しないことが原因でした。

エイリアスでWebGLとして参照したwebglディレクトリがありましたが、残念ながらこれはビルドでは機能しましたが、コード監視では機能しませんでした。

5
Potter

私の場合、エラーはディレクトリ名に空のスペースがあり、「Repository Name」を「RepositoryName」に変更することで発生し、すべて正常に機能しました。

0
JC.b