react hot loader的使用方式

webpack中提供了熱模組更新的功能，在不重新整理整個頁面的情況下來替換某些更變的元件，而這樣做的最大的好處就在於狀態的儲存。比如我們前面在輸入框中輸入的內容，就不會在我們熱模組替換以後被重新整理掉，讓我們要重新再輸入一次了。

而react的構建現在一般還是基於webpack的，webpack也提供了對應的外掛程式。react-hot-loader

跟著github上面的例子我們就可以很快進行搭建了。

這裡要注意幾點。

下面給出乙個demo來進行配置

目錄結構

import react from 'react';
import from 'react-hot-loader';
import from './components/hello.jsx';
require('./font.js');
constructor()
render() 
}

這裡的svg可以進行刪除

index.jsx

import react from 'react'
import from 'react-dom'
import './scss/index.scss';
const root = document.createelement('div')

這裡我們可以發現，在index.jsx中是自行建立了乙個div所以我們在模版檔案中其實可以不用哪個我們經常使用的

了子元件

hello.jsx

import react from 'react';
import from 'react-hot-loader';
export class hello extends react.component
}

可以發現，我們的子元件並沒有使用hot這個東西，代表只要我們給根元件設定hot就好了。

官網上給出的例子是使用--hot進行啟動，如果我們只想在webpack中進行配置而不是使用npm script

我們可以這樣配置webpack的config檔案。

webpack.config.dev.js

console.log("dev");
const path = require('path');
const webpack = require('webpack');
const htmlwebpackplugin = require('html-webpack-plugin');
const extracttextwebpackplugin = require('extract-text-webpack-plugin');
const hotmodulereplaceplgun = require('webpack/lib/hotmodulereplacementplugin');
module.exports = ,
module: }},
,,}],},
}],},]},
plugins: [
new htmlwebpackplugin(),
// new extracttextwebpackplugin("css/[name].css"),
// new extracttextwebpackplugin("scss/[name].scss"),使用這個就無法開啟熱模組替換了
// 提取公共模組 
new webpack.optimize.commonschunkplugin(),
// 設定熱更新
new hotmodulereplaceplgun(),
new webpack.namedmodulesplugin(),
],devserver: ,
resolve: ,
watchoptions: ,
devtool: 'source-map'
};

這裡最關鍵的是

jsx的配置以及入口檔案的配置

entry: [

'react-hot-loader/patch',

'./src/index.jsx'], }

},然後設定hot為true

devserver: ,

這裡要注意的一點是，我們沒有使用單獨提取檔案的功能把css進行單獨抽出

const

extracttextwebpackplugin =

require(

'extract-text-webpack-plugin');

這個原因是因為他不支援熱模組更新的原型，一旦單獨提取了css檔案，那麼我們修改了scss跟css都不會立即生效。

所以我們需要兩個webpack.config.js檔案來實現開發跟生產的區分。

最後是npm的執行檔案

"dev":

"node_modules

\\.bin

\\webpack-dev-server --config webpack.config.dev.js",

問題得以解決。

因為技術的更新其實很快。可能當你看到這篇博文的時候，裡面的方法已經跟最新版的對不上了，這個時候我還是建議你去github上面把這個專案clone下來。然後執行一下裡面的例子看看，這個樣子應該會好一點。

react hot loader的使用方式

container of 的的的原理

存在的就是合理的，發生的即是必然的。

Apache的rewrite的重寫相關的引數

react hot loader的使用方式

container of 的的的原理

存在的就是合理的，發生的即是必然的。

Apache的rewrite的重寫相關的引數

相關推薦