目錄結構
同2-6
安裝的依賴
npm i react-hot-loader@next -D
.babelrc
// react-hot-loader是提供熱更新的一個工具，react-hot-loader/babel表示在使用babel的情況下使用react-hot-loader
{
"presets": [
// loose松散的
["es2015", {"loose": true}],
// 添加了react則支持編譯jsx語法
"react"
],
"plugin": ["react-hot-loader/babel"]
}
app.js
// 只要有jsx代碼就需要引入react。jsx代碼最終編譯出來是React.creaeElemnt()
import React from 'react'
//用來react組件渲染到dom中，還有react-native 是渲染到手機app中的
import ReactDOM from 'react-dom'
// 我們要用AppContainer來包裹根節點實際想要渲染的內容
import { AppContainer } from 'react-hot-loader'
import App from './App.jsx'
// 因為需要多次渲染，我們可以封裝一個方法
const root = document.getElementById('root')
const render = Component => {
ReactDOM.hydrate(
<AppContainer>
<Component></Component>
</AppContainer>,
root
)
}
render(App)
// 如果使用了服務端渲染就要使用hydrate，因為react回去對比服務端和客戶端的代碼，
// 如果不一致，則會使用客戶端的
// ReactDOM.hydrate(<App/>, document.getElementById('root'))
if (module.hot) {
module.hot.accept('./App.jsx', () => {
const NextApp = require('./App.jsx').default
// ReactDOM.hydrate(<NextApp/>, document.getElementById('root'))
render(NextApp)
})
}
// 熱更新的代碼出現的時候，重新加載一次app.jsx，加在完成之后重新掛載
webpack.config.client.js
const path = require('path')
const webpack = require('webpack')
// 在瀏覽器中打開頁面需要引入
const HTMLPlugin = require('html-webpack-plugin')
// 這些環境都是我們啟動命令時手動配置的
const isDev = process.env.NODE_ENV === 'development'
var config = {
entry: {
app: path.join(__dirname, '../client/app.js'),
},
output: {
// []表示一個變量 hash如果有變動就刷新瀏覽器緩存 否則不刷新
filename: '[name].[hash].js',
// path.join根路徑下的絕對路徑 拼接處生成文件存放路徑
path: path.join(__dirname, '../dist'),
// 靜態資源引用時的路徑， 設置之后表示請求的是否是靜態資源
publicPath: '/public/'
},
module: {
rules: [
{
test: /.jsx$/,
// babel 編輯es6， es7， es8， jsx 編譯成es5
// babel-loader只是一個插件并不包含babel核心代碼，還需要安裝babel-core
// 默認編譯es6，如何配置支持jsx, 新建文件.babelrc
loader: 'babel-loader'
},
// node_modules中的js代碼全部都是es5，所以不需要編譯了
{
test: /.js$/,
loader: 'babel-loader',
exclude: [
path.join(__dirname, '../node_modules')
]
}
]
},
plugins: [
// 生成一個html頁面，webpack編譯的時候把生成的所有entry都注入進去，路徑是根據output的路徑
new HTMLPlugin({
// 最終生成的dist的html會以此作為模板
template: path.join(__dirname, '../client/template.html')
})
]
}
if (isDev) {
config.entry = {
app: [
// 客戶端在熱更新代碼的時候，需要去用到的內容,這個loder把相關代碼封裝在patch這個模塊中
'react-hot-loader/patch',
path.join(__dirname, '../client/app.js')
]
}
config.devServer = {
// 0.0.0.0表示可以用localhost，127.0.0.1，本機ip任意一種方式去訪問
host: '0.0.0.0',
port: '8888',
// 我們啟一個服務就是服務于webpack編譯出來的靜態文件的
contentBase: path.join(__dirname, '../dist'),
hot: true,
// 如果在webpack編譯的過程中有任何錯誤，我們讓它在網頁上顯示一層黑色的背景，并顯示錯誤
overlay: {
// 值顯示出現錯誤的信息
errors: true
},
publicPath: '/public',
historyApiFallback: {
index: '/public/index.html'
}
}
config.plugins.push(new webpack.HotModuleReplacementPlugin())
}
module.exports = config
