redux+react+webpack+热加载+兼容IE8（持续更新）

redux+react+webpack+热加载+兼容IE8

动机

（备忘录，持续更新）项目需要支持到IE8，并且我是深度懒癌患者，于是选择了高配带有热加载 功能的（兼容了IE）环境。项目地址在下面。

刚刚接触react+redux架构没多久，用了大半天时间搭了redux+react+hot-middleware+supportIE8的环境。也分享给刚刚接触、需要现成脚手架的朋友。基础框架参照官方DEMO而来，仅对框架做了一些细微调整和IE兼容。如果喜欢请点star(有动力更新嘛)。PS: src目录下，是一个极简的todo，你可以随意删除、替换为你的项目资源。

使用

安装依赖

npm install

运行

npm start //localhost:3000

build

npm run build //build后index.html需要手动修改script路径，这里我有时间会修改为自动替换

已知问题（收集中）

1.开发环境中，IE8下不显示界面，通过build打包后是没问题的，不影响使用。如果有大神解决了这个问题，可以在下面留言或 Pull Request。
2.收集中…

方案

下面贴出环境的就些依赖和配置，我会陆续添加注释。package.json中不应该有注释，所以请不要复制使用，可以从github上拉取

package.json

{
  "name": "redux-react-supportIE8-template",
  "version": "1.0.0",
  "description": "React support IE8",
  "main": "./src/index.js",
  "scripts": {
    "start": "node server.js",
    "build:webpack": "cross-env NODE_ENV=production webpack --config webpack.config.prod.js",
    "build": "npm run build:webpack",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "iVan <jiestyle21@gmail.com>",
  "dependencies": {
    "eventsource-polyfill": "^0.9.6", //support ie8
    "fetch-ie8": "^1.4.0", //support ie8
    "object-assign": "^4.0.1",
    "react": "^0.14.3",
    "react-dom": "^0.14.3",
    "react-redux": "^4.4.0",
    "redux": "^3.3.1",
    "redux-logger": "^2.6.1",
    "redux-thunk": "^2.0.1"
  },
  "devDependencies": {
    "babel-loader": "^6.2.0",
    //babel对export default{}支持不好，不想写成module.exports就安装下面
    "babel-plugin-add-module-exports": "^0.1.2",
    "babel-preset-es2015": "^6.3.13", //ES2015转码规则
    "babel-preset-react": "^6.3.13",  //react转码规则
    "babel-preset-stage-0": "^6.3.13", //ES7不同阶段语法提案的转码规则，一共有4个，选择安装一个
    "es3ify-loader": "^0.1.0",
    "express": "^4.13.3",
    "cross-env": "^1.0.6",
    "webpack": "^1.12.9",
    "webpack-dev-middleware": "^1.4.0",
    "webpack-hot-middleware": "^2.6.0"
  }
}

下面配置server：

var path = require('path');
var express = require('express');
var webpack = require('webpack');
var config = require('./webpack.config');

var app = express();
var compiler = webpack(config);
//通过localhost可以访问项目文件夹下的所有文件，等于动态为每个静态文件创建了路由
app.use(express.static(path.join(__dirname, '/')))
app.use(require('webpack-dev-middleware')(compiler, {
  noInfo: true,
  publicPath: config.output.publicPath
}));

app.use(require('webpack-hot-middleware')(compiler));

app.get('/', function(req, res) {
  res.sendFile(path.join(__dirname, 'index.html'));
});

app.listen(3000, 'localhost', function(err) {
  if (err) {
    console.log(err);
    return;
  }
  console.log('Listening at http://localhost:3000');
});

webpack.config.js

webpack.config.js这个文件npm start后在内存中构建的bundle.js
关于下面代码中webpack-hot-middleware/client?reload=true和其他参数请移步作者github，文档很详细轻轻点这里，记得回来

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

module.exports = {
  entry: [
    'eventsource-polyfill', //兼容ie
    'webpack-hot-middleware/client?reload=true', //看上面
    './src/index'
  ],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/static/'
  },
  debug: true,
  devtool: 'source-map',
  plugins: [
      new webpack.optimize.OccurenceOrderPlugin(),
      new webpack.HotModuleReplacementPlugin(),
      new webpack.NoErrorsPlugin()
  ],
  module: {
    //loader自行添加
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loaders: ['babel-loader']
      }
    ],
    postLoaders: [
      {
        test: /\.js$/,
        loaders: ['es3ify-loader']
      }
    ]
  }

};

webpack.config.prod.js

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

module.exports = {
  devtool: 'source-map',
  entry: [
    './src/index'
  ],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/static/'
  },
  plugins: [
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.DefinePlugin({
      'process.env': {
        'NODE_ENV': JSON.stringify('production')
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      compressor: {
        warnings: false
      }
    })
  ],
  module: {
    loaders: [{
      test: /\.js$/,
      exclude: /node_modules/,
      loaders: ['babel-loader']
    }],
    postLoaders: [
      {
        test: /\.js$/,
        loaders: ['es3ify-loader']
      }
    ]
  }
};

项目地址轻轻点这里