webpack react-hot-loader配置

前几天去看了一下新闻说webpack现在很火 而近期又想搞搞react 然后就是各种的百度,结果发现并没有太多有价值的 看来还得上google.尤其是在这个过程中安装webpack-dev-server出现了大问题说vcbuild未找到等等,原来是因为没有安装vs 后来就升级了win10+vs2013 允许妥妥的.

首先需要安装一下 

npm install webpack webpack-dev-server react-hot-loader --save

      

       这是我的测试的项目结构

     webpack.config.js

var webpack = require('webpack');
var path = require('path');
module.exports = {
    entry: [
        'webpack-dev-server/client?http://127.0.0.1:3000',//这是你服务器的ip和端口 保持和server.js一样端口和ip
        'webpack/hot/only-dev-server',//这里不建议选择webpack/hot/dev-server 
        './app/main'//入口
    ],
    output: {
        path: path.join(__dirname, 'build'),
        filename: 'bundle.js',
        publicPath: '/build/'//这里和server.js config.output.publicPath 对应是服务端产出路径
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),//添加部分插件
        new webpack.NoErrorsPlugin()//可选，但建议添加上NoErrorsPlugin（）遇到语法错误时会暂停。修复该错误会自动恢复
    ],
    resolve: {
        extensions: ['', '.js']
    },
    module: {
        loaders: [{
            test: /\.jsx?$/,
            loaders: ['react-hot', 'babel'],//这里我使用的是babel 因为有ES6 也可以使用jsx-loader 都可以
            include: path.join(__dirname, 'app')
        }]
    }
};

       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,
  noInfo: false,
  historyApiFallback: true
}).listen(3000, '127.0.0.1', function (err, result) {
  if (err) {
    console.log(err);
  }
  console.log('Listening at localhost:3000');
});

大体的配置就好了 启动node server.js

输入http://localhost:3000/ 就可以看到效果了