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

•  

項目地址輕輕點這裏