react局部刷新

react局部刷新

參考文章

react-hot-loader

安裝

依賴webpack-dev-server

$ npm i --save-dev webpack-dev-server
$ npm i --save-dev react-hot-loader

使用

代碼

• 新建server.js

var webpack = require('webpack');
var WebpackDevServer = require('webpack-dev-server');
var config = require('./webpack.config');

new WebpackDevServer(webpack(config), {
  publicPath: config.output.publicPath,
  hot: true,
  historyApiFallback: true
}).listen(3000, 'localhost', function (err, result) {
  if (err) {
    return console.log(err);
  }

  console.log('Listening at http://localhost:3000/')
});

• 配置webpack.config.js

var path = require('path');
var webpack = require('webpack');

module.exports = {
  devtool: 'source-map',
  entry: [
    'react-hot-loader/patch',
    'webpack-dev-server/client?http://0.0.0.0:3000', // WebpackDevServer host and port
    'webpack/hot/only-dev-server', // "only" prevents reload on syntax errors
    './index.js' // Your appʼs entry point
  ],
  output: {
    path: __dirname,
    filename: 'bundle.js',
    publicPath: '/static/'
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ],
  module: {
    loaders: [
      {
        test: /.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      }
    ]
  }
};

• package.json

"scripts": {
    "start": "node server.js"
},

• .babelrc

{
  "presets": ["react", "es2015"],
  "plugins": ["react-hot-loader/babel"]
}

運行

$ npm run start

經過http://localhost:3000來訪問

控制檯顯示以下所示:

修改組件中的文本，觀察控制檯以下所示:

證實局部熱更新已搭建完畢。

參考項目

$ git clone https://github.com/doudounannan/react-redux.git
$ cd react-redux
$ git checkout react-hot-loader-demo
$ cd demo/react-hot-loader-demo
$ npm run start