热替换详解
Main role
webpack-dev-server
webpack-hot-middleware
webpack-dev-middleware
react-hot-loader
欢迎mark
1 webpack-dev-server
webpack官方提供的一个简易服务器，可以让我们快速的启动服务，配置devServer hot 为true即可，这个属于全局刷新
2 webpack-hot-server webpack-dev-middleware
当我们想要在自己服务器上使用全局刷新功能时使用
3 react-hot-loader
当我们想要局部刷新，并且不改变当前程序的状态（state）.例如你当前控件有一个默认状态，和一个操作之后的状态，你不想你修改源码后，导致全局刷新，使得刚刚操作后状态消失（导致需要重复之前的操作)，这时候你需要使用到改插件。
服务器配置
1.使用webpack搭建一个简单的热替换服务器demo地址
仅需要设置devServer hot为true，并添加插件HotModuleReplacementPlugin。便可以实现一个最简单热替换服务器，然后通过webpack-dev-server来启动
+ devServer: {
+ hot: true,
+ },
+ new webpack.HotModuleReplacementPlugin(),__启动__ : webpack-dev-server –config 配置文件名
2.使用node.js搭建一个简易服务器demo地址
这里需要使用到两个中间件 webpack-hot-middleware & wepback-dev-middleware,然后在webpack中entry上配置，并添加插件HotModuleReplacementPlugin。通过server.js中使用两个中间件，最后通过node server.js启动
webpack config文件
entry: [
// http://webpack.github.io/docs/hot-module-replacement-with-webpack.html
+ 'webpack-hot-middleware/client?reload=true',
'./src/A/index.js'
],
+ new webpack.HotModuleReplacementPlugin(),server.js文件
const path = require('path');
const webpack = require('webpack');
// 服务器框架
const express = require('express');
const config = require('./index');
const compiler = webpack(config);
const app = express();
// 热更新
app.use(require('webpack-dev-middleware')(compiler, {
noInfo: true,
hot: true,
inline: true,
// publicPath: 'dist'
}));
app.use(require('webpack-hot-middleware')(compiler));
// 启动服务
app.listen("4000", '0.0.0.0', (err) => {
if (err) {
console.error(err);
return;
}
console.log(' start server at port ' +'4000');
});
3.使用react-hot-loader搭建热替换服务器demo地址
这里需要下载react-hot-loader，然后配置devserver hot 为true，然后需要在entry中配置 ‘react-hot-loader/patch’,.babelrc文件中配置 react-hot-loader/babel & moudles: false,并且需要在入口文件源码中加上热替换逻辑，最后通过webpack-dev-server跑起来
1.注意点
HtmlWebpackPlugin不能和该插件一起使用，如果想使用该插件，请使用自建服务器，参考
react hot loader server部署
2.如何配置
webpack config 配置
入口配置
添加devServer配置
添加HotModuleReplacementPlugin插件
除去HtmlWebpackPlugin
webpack config源码
const webpackConfig = {
// 入口配置
entry: [
+ 'react-hot-loader/patch',
+ 'webpack-dev-server/client?http://0.0.0.0:4000', // WebpackDevServer host and port
+ 'webpack/hot/only-dev-server', // "only" prevents reload on syntax errors
'./src/React_hot_loader/index.js'
],
// Webpack config options on how to obtain modules
resolve: {
// 当你reuire时，不需要加上以下扩展名
extensions: ['.js', '.md', '.txt'],
},
devtool: 'eval',
// 输出配置
output: {
path: buildPath, // 输出文件路径
filename: 'app.js', // 输出文件名字
chunkFilename: '[chunkhash].js', // chunk文件名字
},
+ devServer: {
+ host: 'localhost',
+ port: 4000,
+
+ historyApiFallback: true,
+ // respond to 404s with index.html
+ hot: true,
+ // enable HMR on the server
+ },
plugins: [
+ new webpack.HotModuleReplacementPlugin(),
// 防止加载所有地区时刻
// new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
// Webpack 2以后内置
// new webpack.optimize.OccurrenceOrderPlugin(),
// 碰到错误warning但是不停止编译
new webpack.NoEmitOnErrorsPlugin(),
// 生成html文件
- // new HtmlWebpackPlugin({
- // // 输出文件名字及路径
- // filename: 'index.html',
- // template: 'index.html'
- // }),
new webpack.NamedModulesPlugin(),
],
module: {
rules: [
{
test: /\.js$/,
use: [
'babel-loader',
],
exclude: /node_modules/,
},
// webpack2 以后内置配置
// {
// test: /\.json$/,
// use: 'json-loader',
// },
{
test: /\.less/,
use: [
'style-loader',
'css-loader',
'postcss-loader',
'less-loader'
]
},
{
test: /\.txt$/,
use: 'raw-loader',
},
{
test: /\.md$/,
use: 'raw-loader',
},
{
test: /\.css$/,
use: 'style-loader!css-loader!postcss-loader',
},
{
test: /\.(eot|woff|woff2|ttf|svg|png|jpg)$/,
loader: 'url-loader?limit=8192&name=[name]-[hash].[ext]'
}
],
},
};
module.exports = webpackConfig;
src源码
if (module.hot) module.hot.accept('./App', () => render(App));.babelrc
{
"env":{
"production": {
"presets": [
"es2015",
"react",
"stage-0"
],
"plugins": ["transform-decorators-legacy","add-module-exports", "transform-object-assign"]
},
"development": {
"presets": [
// http://babeljs.io/docs/plugins/preset-es2015/#modules
// 默认将es6选以commonJs类型进行转化
+ ["es2015",
+ { "modules": false }
+ ],
- // "es2015",
"react",
"stage-0"
],
+ "plugins": ["react-hot-loader/babel"]
}
}
}4.使用react-hot-loader + node.js搭建热替换服务器demo地址
这里需要下载react-hot-loader，然后需要在entry中配置 ‘react-hot-loader/patch’ & ‘webpack-hot-middleware/client’, ,.babelrc文件中配置 react-hot-loader/babel & moudles: false,并且需要在入口文件源码中加上热替换逻辑，还要再server.js中进行中间件的配置，最后通过node server.js启动
1. 如何配置
webpack config 配置
入口配置
src入口文件配置
.babelrc文件配置
server.js 文件配置
添加webpack-hot-middleware 用于开启hmr
webpack-dev-middleware 用于设置hot为true
2. 源码实现
webpack config源码
const webpackConfig = {
// 入口配置
entry: [
+ 'react-hot-loader/patch',
+ 'webpack-hot-middleware/client', //用于启动hmr
'./src/React_hot_loader/index.js'
],
// Webpack config options on how to obtain modules
resolve: {
// 当你reuire时，不需要加上以下扩展名
extensions: ['.js', '.md', '.txt'],
},
devtool: 'eval',
// 输出配置
output: {
path: buildPath, // 输出文件路径
filename: 'app.js', // 输出文件名字
chunkFilename: '[chunkhash].js', // chunk文件名字
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
// 防止加载所有地区时刻
// new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
// Webpack 2以后内置
// new webpack.optimize.OccurrenceOrderPlugin(),
// 碰到错误warning但是不停止编译
new webpack.NoEmitOnErrorsPlugin(),
// 生成html文件
// new HtmlWebpackPlugin({
// // 输出文件名字及路径
// filename: 'index.html',
// template: 'index.html'
// }),
// new webpack.NamedModulesPlugin(),
],
module: {
rules: [
{
test: /\.js$/,
use: [
'babel-loader',
],
exclude: /node_modules/,
},
// webpack2 以后内置配置
// {
// test: /\.json$/,
// use: 'json-loader',
// },
{
test: /\.less/,
use: [
'style-loader',
'css-loader',
'postcss-loader',
'less-loader'
]
},
{
test: /\.txt$/,
use: 'raw-loader',
},
{
test: /\.md$/,
use: 'raw-loader',
},
{
test: /\.css$/,
use: 'style-loader!css-loader!postcss-loader',
},
{
test: /\.(eot|woff|woff2|ttf|svg|png|jpg)$/,
loader: 'url-loader?limit=8192&name=[name]-[hash].[ext]'
}
],
},
};server.js源码
// 热更新
+app.use(require('webpack-dev-middleware')(compiler, {
+ noInfo: true,
+ hot: true,
+ historyApiFallback: true
+}));
+app.use(require("webpack-hot-middleware")(compiler));
+
+app.get('*', (request, response) => {
+ response.sendFile(path.resolve(defaultConfig.root, 'index.html'));
+});
// 启动服务
app.listen("4000", '0.0.0.0', (err) => {
if (err) {
console.error(err);
return;
}
console.log(' start server at port ' +'4000');
});
src源码
if (module.hot) module.hot.accept('./App', () => render(App));.babelrc
{
"env":{
"production": {
"presets": [
"es2015",
"react",
"stage-0"
],
"plugins": ["transform-decorators-legacy","add-module-exports", "transform-object-assign"]
},
"development": {
"presets": [
// http://babeljs.io/docs/plugins/preset-es2015/#modules
// 默认将es6选以commonJs类型进行转化
+ ["es2015",
+ { "modules": false }
+ ],
- // "es2015",
"react",
"stage-0"
],
+ "plugins": ["react-hot-loader/babel"]
}
}
}