热替换详解

Main role

@H_301_5@

webpack-dev-server

@H_301_5@

webpack-hot-middleware

@H_301_5@

webpack-dev-middleware

@H_301_5@

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'
  ],

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 配置

@H_301_5@

入口配置

@H_301_5@

添加devServer配置

@H_301_5@

添加HotModuleReplacementPlugin插件

@H_301_5@

除去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$/,{
        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",+      "plugins": ["react-hot-loader/babel"]
    }
  }
 
  
}

4.使用react-hot-loader + node.js搭建热替换服务器demo地址

这里需要下载react-hot-loader，然后需要在entry中配置 'react-hot-loader/patch' & 'webpack-hot-middleware/client',并且需要在入口文件源码中加上热替换逻辑，还要再server.js中进行中间件的配置，最后通过node server.js启动

1. 如何配置

webpack config 配置

@H_301_5@

入口配置

src入口文件配置

.babelrc文件配置

server.js 文件配置

@H_301_5@

添加webpack-hot-middleware 用于开启hmr

@H_301_5@

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'
  ],plugins: [
    new webpack.HotModuleReplacementPlugin(),// 生成html文件
    // new HtmlWebpackPlugin({ 
    //     // 输出文件名字及路径
    //   filename: 'index.html',//   template: 'index.html'
    // }),// new webpack.NamedModulesPlugin(),};

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",(err) => {
  if (err) {
    console.error(err);
    return;
  }
  console.log(' start server at port ' +'4000');
});

src源码

if (module.hot) module.hot.accept('./App',+      "plugins": ["react-hot-loader/babel"]
    }
  }
 
  
}