logo标签列表

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

npmwebpackwebpack-dev-server
58
当我在运行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生成的。

6个回答
43
为了让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上无法使用，但显然并非如此。
此外，由于现在监视和重新编译已经起作用，但自动浏览器刷新部分没有起作用，我添加了--inline参数到@deowk的答案中，启用了“内联模式”：
webpack-dev-server --content-base ./ --port 9966 --hot --inline

官方文档中的引用：“使用webpack-dev-server和热模块替换的最简单方法是使用内联模式。” 来源：https://webpack.github.io/docs/webpack-dev-server.html#hot-module-replacement

这是我的情况下正确的答案。我正在使用Ubuntu 18.04，只有这个解决方案起作用。 - smupyknight
增加最大用户观看数解决了我的问题。Manjaro 18.1.0-rc8 - menfon
1
附加的文件链接已经失效。 - Jithin B
40

你需要在webpack-dev-server运行时使用--hot标志：

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

然后，你就可以通过访问localhost:9966/webpack-dev-server/来获得热加载版本了。

你不需要再运行watch命令。

更新：

你的webpack配置中这个入口必须更改：

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

更改publicPath入口：

publicPath: '/assets/'

这是我的第一次尝试。如果我将以下内容放在我的webpack配置文件中： "web": "webpack-dev-server --content-base ./ --port 9966 --hot"并且我在http://localhost:9966/webpack-dev-server/上打开浏览器， 如果我进行了更改，我会看到短语“应用程序已更新，重新编译..”，然后是“应用程序热更新。”，但我看不到我的修改。 如果我停止并重新启动服务器，我仍然看不到修改。 如果我运行“npm run watch”或“npm run build”，然后运行服务器，我可以正确地看到它们。 - Jurgo Boemo
好的，让我们看看能否找出你的问题所在。你能否更新你的问题并展示给我你的目录结构？我想检查一下你的 content-base 设置是否正确。听起来像是你的 bundle 在 webpack-dev-server 中甚至没有被加载。 - deowk
我投票支持这个修正后的“entry”行解决了我的问题。在此之前，我也遇到了同样的问题——更改被检测到，命令行看起来工作正常，浏览器显示“应用已更新”，但实际上没有重新加载。 - Dave
当我在入口文件更新main.js时，页面会被刷新，但更改并没有出现在页面上。通过“webpack-dev-server”的重新编译没有影响，我停止服务器，再次运行“webpack”，然后也运行“web-pack-server”，然后更改发生。这是正常的还是我漏了什么？ - ibubi
15

@funkybunky指出了正确的问题，但（依我看）用错了方法。至少在我的情况下，webpack试图监视它使用的每个文件，包括从npm中拉取的数千个依赖项的深层文件链。 我根据文档添加了以下内容到我的配置中：（参考文献）：

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

当然，如果你有成千上万个需要被监视的文件，你可以合法地提高限制，但最好忽略那些不太可能发生变化的供应商库。

你是不是想引用 /node_modules/ 目录？ - vidstige
1
我没有。如果任何路径中有“node_modules”，我绝对不想监视该路径。这就是为什么我指定了一个正则表达式。 - Coderer
5

为了帮助其他人，我把这个问题放在这里。我的问题与之相同，但是由于目录名称的大小写不一致和Webpack别名的声明不当导致的。

我有一个名为WebGL的目录，在我的别名中引用为webgl，不幸的是，这对构建工具有效，但是在代码监视过程中却无法使用。

0
在我的情况下，错误是由目录名称中的空格导致的，通过将“Repository Name”更改为“RepositoryName”，一切正常工作！
0

我想发表我的解决方案。由于我的硬盘设置，我在OS X上运行Flutter应用程序时遇到了相同的问题。

要点是，如果您的项目文件夹位于符号链接文件夹中，则在OS X上可能无法检测到文件更改。以前，我们使用的是Webpack 3.X，我相信，在原始文件夹中，实时重新加载/刷新可以正常工作。然而，在升级到最新的Webpack (^5.75.0)和Webpack Dev Server (^4.11.1)之后，热重载对我不再起作用。

我的原始项目文件夹是：

/Users/blakemiller/h/somefolder/v2/my-widget

那里的“/h”是符号链接，指向：/System/Volumes/Data/projects/home/web/
我不确定在某个时候升级 macOS 时发生了什么，但升级以一种我不太理解的方式改变了文件夹。
将文件夹放在这里而不是使用符号链接解决了我的问题。
/Users/blakemiller/my-widget

我怀疑这对许多人来说都不适用，因为我的设置可能相当特定，但也许它能帮助其他人节省5个小时的时间...

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接