webpack中啟動了模塊熱替換，也是全網頁刷新，不是局部更新！

這兩天在研究react-hot-loader如何應用在react的項目中，之前webpack.dev.config.js配置中，設置了devServer: { hot: true, ... }，plugins: [?new Webpack.HotModuleReplacementPlugin(), ... ]，更改了js/jsx 文件都是全網頁刷新，開始以為這就是熱更新，且滿足現狀。而且修改了css/less文件后頁面不會刷新，需要手動刷新樣式才會生效，覺得不應該手動刷新但是也沒去找原因為什么會這樣【i 服了me】。

想提高開發效率，于是安裝react-hot-loader，看了網上別人寫的博客，以及官網后，需要配置webpack,我沒做配置(其實配置了也管用，只是配置后我的eslint檢驗變的更嚴厲了)，直接在項目路由文件中使用：

import { hot, setConfig } from 'react-hot-loader';? const Routes = () => {} ;? export default hot(module)(Routes);

為什么不在app.js 入口文件中使用呢？因為入口文件中使用了，在入口文件中使用react-hot-loader出現警告：You cannot change ;

再說一下，安裝react-hot-loader后webpack以及.babelrc沒做任何配置，直接在路由文件中使用了。且生效了。

但是，修改css/less 文件后，還是需要手動刷新頁面樣式才會生效，此時還是不知道啥原因。后來在網上看到這篇章才然大悟使用react-hot-loader的一些問題，原來是我的webpack配置在開發環境中抽離了css(一般在生產環境中進行抽離),于是進行了修改：

使用style-loader

修改的意思是將樣式文件也打包到js中，然后，然后修改了css/less 文件的樣式后頁面元素局部刷新了。后來發現即使不添加react-hot-loader，將css/less打包進js后，修改樣式文件頁面也會熱更新的。

對于上面遇到的問題，主要是自己學的淺，沒深入研究問題導致的，不說了，繼續學習吧！

總結

以上是生活随笔為你收集整理的css hot loader,解决安装react-hot-loader后修改css/less文件不会热更新问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。