webpack热加载React webpack-dev-server

发表于   |   分类于   |  

Webpack开发服务器（webpack-dev-server）

  • npm install -g webpack-dev-server
  • 静态资源Web服务器
  • 基于Node.js Express
  • 内容实时打包和推送

react-hot-loader

  • npm install —save-dev react-hot-loader
  • React组件的热替换

创建一个server.js文件,用于启动webpack-dev-server

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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,//开启Hot Module Replacement (HMR)
  noInfo: false,
  historyApiFallback: true
}).listen(3000, '127.0.0.1', function (err, result) {
  if (err) {
    console.log(err);
  }
  console.log('Listening at localhost:3000');
});

修改webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
12
entry: [
  'webpack-dev-server/client?http://127.0.0.1:3000', // WebpackDevServer host and port,资源服务器地址,打包生成的文件从client?http://127.0.0.1:3000去获取动态的代码更新
  'webpack/hot/only-dev-server',
  './scripts/index.js' // Your appʼs entry point
]
loaders: [{
    test: /\.js$/,
    exclude: /node_modules/,
    loader: 'react-hot!jsx-loader?harmony'//让Webpack用react-hot-loader去加载React组件,harmony启动es6
  }]

之后启动node server.js

前端服务器调用

载入打包文件时指定完整的URL地址

1
<script src="http://127.0.0.1:3000/assets/bundle.js"></script>

建立Socket IO来动态加载模块