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,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']
      }
    ]
  }
};