webpack-dev-server 不监视我的文件更改

Question

当我在 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 生成的

Answer 1

你需要运行带有 --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/'

Answer 2

为了让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 参数，它启用了 "inline mode"： webpack-dev-server --content-base ./ --port 9966 --hot --inline

引自官方文档："The easiest way to use Hot Module Replacement with the webpack-dev-server is to use the inline mode." 资料来源：https://webpack.github.io/docs/webpack-dev-server.html#hot-module-replacement

Answer 3

我会把它放在这里以防它对任何人有帮助。我的问题是一样的，但是由于目录名和 webpack 别名声明的大小写不一致造成的。

我有一个 WebGL 目录，我在我的别名中将其引用为 webgl，不幸的是，这适用于构建，但不适用于代码监视。

Answer 4

@funkybunky 确定了正确的问题，但（恕我直言）以错误的方式解决了它。至少在我的例子中，webpack 试图监视它使用的每个文件，包括从 npm 中提取的数千个依赖文件的深层链。我将其添加到我的配置中，per the docs:

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

当然，您可能有数千个文件需要查看，在这种情况下，请继续提高限制，但您最好忽略不太可能更改的供应商库。

Answer 5

在我的例子中，错误是由目录名称中的空 space 引起的，通过将 "Repository Name" 更改为 "RepositoryName"，一切正常！

webpack-dev-server 不监视我的文件更改

webpack-dev-server does not watch for my file changes

npm

webpack

webpack-dev-server

更新：