当我在webpack-dev服务器运行时更改文件时，捆绑包的文件不会更新。以下是我的webpack.config.js和package.json文件，您可以从我的npm脚本中看到，我已经解决了在同一命令(npm run watch & webpack-dev-server --content-base ./ --port 9966)中运行webpack watch和webpack-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 生成的
为了让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-足够多的观察者
我最初怀疑原因是fsevents在Ubuntu上不起作用，但事实显然并非如此。
此外，由于现在观看和重新编译工作正常，但浏览器自动刷新部分不起作用，我在@deowk的答案中添加了--inline参数，从而启用了"内联模式"：webpack-dev-server --content-base ./ --port 9966 --hot --inline
引用官方文档中的一句话："在webpack-dev服务器中使用热模块替换的最简单方法是使用内联模式。"来源：https://webpack.github.io/docs/webpack-dev-server.html#hot-模块更换
您需要使用--hot标志运行webpack-dev服务器：
webpack-dev-server --content-base ./ --port 9966 --hot
然后您可以访问热加载版本localhost:99966/webpack-dev-server/
你也不需要运行手表。
更新：
您的webpack配置中的此条目必须更改：
entry: ['./js/main.js'],->entry: ['webpack/hot/dev-server' , './js/main.js']
更改您的publicPath条目：
publicPath: '/assets/'
@funkybunky确定了正确的问题，但(IMHO)以错误的方式解决了它。至少在我的情况下，webpack试图监视它使用的每一个文件，包括从npm中提取的数千个依赖文件的深度链。根据文档，我将其添加到了我的配置中：
devServer: {
watchOptions: {
ignored: /node_modules/
}
}
当然，你可以合法地拥有数千个可能需要监视的文件，在这种情况下，继续提高限制，但你可能最好忽略那些不太可能更改的供应商库。
我会把它放在这里，以防它对任何人都有帮助。我的问题也是一样的，但原因是目录名和webpack别名声明的大小写不一致。
我有一个WebGL目录，我在别名中引用它为webgl，不幸的是，这适用于构建，但不适用于代码监视。
在我的案例中，错误是由目录名中的空格引起的，通过将"RepositoryName"更改为"RepositoryName"，一切都很好！
我想我也会发布我的解决方案。由于我的硬盘设置，我在让Flutter应用程序在OS X上运行时也遇到了同样的问题。
要点是，如果您的项目文件夹位于符号链接文件夹中，则检测文件更改可能无法在OS X上工作。我相信，以前我们使用的是Webpack 3.X，在原始文件夹中实时重新加载/刷新工作正常。然而，在升级到最新的Webpack(^5.75.0)和Webpack开发服务器(^4.11.1)后，热重新加载对我来说不再有效。
我最初的项目文件夹是：
/Users/blakemiller/h/somefolder/v2/my-widget
"/h〃；有一个符号链接到：/System/Volumes/Data/projects/home/web/
我不确定在某个时候升级OS X时发生了什么，但升级以一种我并不真正理解的方式改变了文件夹。
把文件夹放在这里，为我解决了这个问题(没有符号链接)：
/Users/blakemiller/my-widget
我怀疑这对很多人来说是否有效，因为我的设置可能非常具体，但也许它会帮助其他人节省5个小时。。。