Npm Web包开发服务器不监视我的文件更改

当我在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

---

资产

目录中的每个文件都是由webpack生成的

您需要使用--hot标志运行webpack dev server：

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

然后可以访问热加载版本localhost:9966/webpack dev server/

你也不需要跑手表

更新： 您的网页配置中的此项必须更改：

条目：['./js/main.js']，

-->

条目：['webpack/hot/dev server'，'./js/main.js']

更改您的publicPath条目：

---

publicPath:'/assets/'

为了让webpack监视我的文件更改（Ubuntu 14.04），我不得不增加监视者的数量（我以前增加过这个数量，但仍然太少）：

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

官方文件来源：

我首先怀疑原因是

fsevents

，它在Ubuntu上不起作用，但显然不是这样

此外，因为现在监视和重新编译工作正常，但自动浏览器刷新部分不工作，所以我在@deook的答案中添加了

--inline

参数，启用了“inline模式”：

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

引用官方文档：“在webpack dev服务器上使用热模块替换的最简单方法是使用内联模式。”

---

资料来源：

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

---

我有一个

WebGL

目录，我在别名中引用它为

WebGL

，不幸的是，这对构建有效，但对代码监视无效。

@funkybunky发现了正确的问题，但（IMHO）以错误的方式修复了它。至少在我的例子中，webpack试图监视它使用的每个文件，包括从

npm

中提取的数千个依赖文件的深层链。我将此添加到我的配置中：

---

当然，您可以合法地拥有数千个可能需要监视的文件，在这种情况下，请继续并提高限制，但您最好忽略那些不太可能更改的供应商库。

在我的情况下，错误是由目录名中的空格引起的，通过将“存储库名称”更改为“RepositoryName”，一切正常！

这是我的第一次尝试。如果我把它放在我的网页包配置文件中：“web”：“网页包开发服务器--内容库/--端口9966--热”，然后打开浏览器，如果我更改了什么，我会看到“应用程序更新，重新编译…”和“应用程序热更新”这两个短语。“，但我可以看到我的修改。如果我停止并重新启动服务器，我仍然看不到修改。如果我运行“npm run watch”或“npm run build”，然后运行服务器，我会正确地看到它们。好的，让我们看看是否可以找出您的问题所在，您是否可以更新您的问题以显示您的目录结构-我想检查您的内容库设置是否正确。听起来你的捆绑包甚至没有加载到webpack-dev-server中。投票通过了这一点，因为修改后的“条目”行对我来说是固定的。在此之前，我也遇到了同样的问题-检测到更改，命令行看起来正常工作，浏览器显示“应用程序已更新”，但实际上没有重新加载。只要我在条目中更新main.js，页面就会被刷新，但页面上没有发生更改。通过

webpack dev server

重新编译不会影响，我停止服务器，再次运行

webpack

，然后也运行

webpack server

，然后发生更改。这是正常的还是我遗漏了什么？你的意思是引用/node\u modules/？我没有。如果任何路径中的任何地方都有“node_modules”，我肯定不想查看该路径。这就是为什么我指定了一个正则表达式，这是我的正确答案。我使用的是Ubuntu18.04，只有这个解决方案有效。增加最大用户手表为我解决了这个问题。Manjaro 18.1.0-RC8附加文档链接已断开。

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