react +webpack+express router实现登录与页面跳转

1、演示效果

2、webpack多入口配置

2.1在webpack.config.js中配置entry

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

//公共文件打包到common.js中
var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.js',['main','login']);

module.exports = {
  cache: true,
  entry: {
    //登陆后进入的主页面
    main: './src/index.js',
    //登录页面
    login:'./src/login.js',
  },
  output: {
    //输出到公共文件public/build下
    path: path.resolve(__dirname, 'public/build'),
    //名称也就是对应的main.js和login.js
    filename: '[name].js',
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        loader: 'babel',
        exclude: /(node_modules|bower_components)/,
        query: {
          presets: ['react', 'es2015', 'stage-0']
        }
      },
      {
        test: /\.css$/,
        loader: 'style-loader!css-loader'
      },
      {
        test: /\.(png|jpg)$/,
        loader: 'url-loader?limit=8192'
      },
      {
        test: /\.(woff|eot|ttf|svg)$/, // Have to configure fonts loaders for the generated fonts,视频播放中出现的文字样式不识别
        loader: 'url',
      }
    ]
  },
  resolve: {
    extensions: ['', '.js', '.jsx', '.css', '.json'],
  },
  plugins: [
    //动态刷新引擎
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin(),
    // 公共文件打包引擎
    commonsPlugin
  ]
};

2.2在express app