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

rbl8hiat  于 2022-12-04  发布在  Webpack
关注(0)|答案(6)|浏览(252)

当我在webpack-dev-server运行时修改我的文件时,bundle的文件没有更新。下面是我的webpack.config.js和package.json文件,正如你从我的npm脚本中看到的,我已经解决了在同一个命令(npm run watch & webpack-dev-server --content-base ./ --port 9966)中运行webpack watchwebpack-dev-server的问题:
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生成

pkmbmrz7

pkmbmrz71#

为了让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参数,它启用了“内联模式”:webpack-dev-server --content-base ./ --port 9966 --hot --inline
引用官方文件:“将热模块更换与webpack-dev-server结合使用的最简单方法是使用内联模式。”资料来源:https://webpack.github.io/docs/webpack-dev-server.html#hot-module-replacement

i86rm4rw

i86rm4rw2#

您需要使用--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/'

n3h0vuf2

n3h0vuf23#

@funkybunky发现了正确的问题,但(恕我直言)修复的方法是错误的。至少在我的情况下,webpack试图监视它使用的每个文件,包括从npm中提取的数千个依赖文件的深链。我在我的配置中添加了以下内容,根据文档:

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

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

elcex8rz

elcex8rz4#

我的问题是相同的,但是由于目录名和webpack别名声明的大小写不一致而引起的。
我有一个WebGL目录,我在别名中引用它作为webgl,不幸的是,这对构建有效,但对代码监视无效。

xcitsw88

xcitsw885#

在我的例子中,错误是由目录名称中的空格引起的,通过将“RepositoryName”更改为“RepositoryName”,一切都正常!

pu3pd22g

pu3pd22g6#

我想我也会发布我的解决方案。由于我的硬盘设置,我在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”有一个符号链接指向:/系统/卷/数据/项目/home/web/
我不知道当我在某个时候升级OSX时发生了什么,但是升级以一种我不太理解的方式改变了文件夹。
把文件夹放在这里,为我解决了这个问题(没有符号链接):

/Users/blakemiller/my-widget

我怀疑这将工作的许多人,因为我的设置可能是相当具体的,但也许它会帮助别人保存5个小时的道路上...

相关问题