Webpack 热部署检测不到文件变化

原文:https://cloud.tencent.com/developer/article/1121778

今天在用Webpack开发的时候,突然发现文件变动后热部署功能不工作了,感觉好像是webpack检测不到文件的修改了。折腾了半天,开始一直以为是自己的代码有问题了,结果一次无意识的重启了一下机器后发现又可以热部署了,感觉像是见鬼了。于是继续观察。

一天后,不幸再次降临,问题又出现了。

调研了一下,原来 Webpack 的热部署功能是使用 inotify 来监视文件变化,其中 fs.inotify.max_user_watches 表示同一用户同时可以添加的watch数目(watch一般是针对目录,决定了同时同一用户可以监控的目录数量)

因此,查看了一下系统当前的 max_user_watches 值

$ cat /proc/sys/fs/inotify/max_user_watches
8192

8192是默认值,可能是这个值太小,而我的app下的文件目录太多,于是试着修改一下

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

修改后查看一下修改结果

$ cat /proc/sys/fs/inotify/max_user_watches
524288

好了,试试修改结果吧,再次测试 webpack 的热部署功能,一切正常了。

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Webpack 是一个打包工具,用于将多个 JavaScript 文件打包成一个文件,通常是一个 bundle.js 文件Webpack 的部署可以分为开发环境和生产环境两种情况。 在开发环境中,可以使用 webpack-dev-server 工具进行部署。首先需要安装 webpackwebpack-dev-server,可以使用以下命令: ``` npm install webpack webpack-dev-server --save-dev ``` 安装完成后,在项目根目录下创建一个 webpack.config.js 文件,用于配置 webpack 的打包规则。例如,以下配置文件将所有以 .js 结尾的文件都打包成一个名为 bundle.js 的文件: ``` module.exports = { entry: './src/index.js', output: { path: __dirname + '/dist', filename: 'bundle.js' } } ``` 然后,在 package.json 文件中添加以下命令: ``` "scripts": { "start": "webpack-dev-server --open" } ``` 运行 `npm start` 命令即可启动 webpack-dev-server,它会在浏览器中打开一个页面,并自动监听文件变化,实时重新编译和刷新页面。 在生产环境中,需要将打包后的文件部署到服务器上。首先需要打包文件,可以使用以下命令: ``` webpack --config webpack.config.js ``` 这会根据 webpack.config.js 文件中的配置生成一个 bundle.js 文件。然后将该文件上传到服务器上,可以部署在任何支持静态文件的服务器上,例如 Apache 或 Nginx。将 bundle.js 文件放置在服务器的某个目录下,然后通过访问该文件的 URL 地址即可使用打包后的 JavaScript 代码。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值