目录结构
同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
网友评论