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

npm Webpack

西里神奇

2020-03-24

当我在webpack-dev-server运行时更改文件时,捆绑包的文件不会更新。从我的npm脚本中可以看到,这是我的webpack.config.js和package.json文件,我已经解决了运行问题,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生成的

第3201篇《webpack-dev-server不监视我的文件更改》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

4个回答
古一 2020.03.24

为了使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

村村 2020.03.24

在我的情况下,错误是由目录名中的空白引起的,通过将“ RepositoryName”更改为“ RepositoryName”,一切正常!

老丝 2020.03.24

我将其放在此处以防万一。我的问题是相同的,但是是由目录名和webpack别名声明的大小写不一致引起的。

我有一个WebGL在别名中引用为的目录webgl,不幸的目录适用于构建,但不适用于代码查看。

神无 2020.03.24

@funkybunky确定了正确的问题,但(IMHO)用错误的方式解决了它。至少就我而言,webpack试图监视它使用的每个文件,包括从中提取的成千上万个依赖文件的深层链npm根据文档将其添加到配置中

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

当然,您合法地可以有成千上万个可能需要监视的文件,在这种情况下,可以提高该限制,但是最好忽略不大可能更改的供应商库。

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android