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

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

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

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

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

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

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

使用style-loader

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

對于上面遇到的問題，主要是自己學(xué)的淺，沒深入研究問題導(dǎo)致的，不說了，繼續(xù)學(xué)習(xí)吧！

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。