這幾天解決了react在ie8下兼容性讼油，解決了我們網(wǎng)站在ie8上打開是空白頁的問題杰赛。親測完全可用，我們的網(wǎng)站 http://bp.microyan.com矮台》ν停可以在ie8下看看。需要說明的是瘦赫，我們網(wǎng)站開發(fā)的時候完全沒有考慮ie8瓶珊，我們初衷只是兼容chrome。后來做兼容ie8耸彪，代碼上基本上沒做修改伞芹，主要是修改了配置文件(修改后的配置文件見下文)。

1. 首先github上這個教程react-ie8蝉娜，我們照著先做一遍唱较，其中對我們網(wǎng)站上的修改包括（重點是react降級到v0.14）。

2. 然后打開我們的ie8瀏覽器召川，看看網(wǎng)站打不開的報錯信息南缓！如圖所示:<br />
   

   ie8錯誤提示圖片
   <br />
   上面提到的github上，有一份表格荧呐，每個錯誤對應(yīng)的解決方法汉形，如下圖所示：<br />
   
   ie8錯誤對應(yīng)圖
   <br />
   這次我們看下，我們ie8上面的每個錯誤倍阐，在下圖中都能找到解決辦法概疆！每個錯誤都解決完，我們的網(wǎng)站就能打開了峰搪！

3. 請注意岔冀，請注意，請注意概耻，重點來了!
   當(dāng)我照著我上面的方式一個一個修改的時候使套，我發(fā)現(xiàn)很多錯誤并不能解決罐呼！ie8還是打不開！這是為什么侦高？聽我慢慢道來：我們的項目代碼分為兩部分（我們自己寫的代碼和node_modules里面引用的外部代碼）嫉柴，按照這個github上的教程，我們只能解決我們自己代碼中的兼容性奉呛，并不能解決node_modules中應(yīng)用的代碼的兼容性差凹！
   比如：Exception thrown and not caught這個問題，他給的解決方法是：把 require('es5-shim') require('es5-shim/es5-sham') 插入到入口文件的最上方侧馅，并且在代碼中不要使用 export * from 'xxx'危尿。
   這樣使用其實可以解決我們代碼中的兼容性，但是node_modules里面應(yīng)用的外部庫的兼容并不能解決馁痴。那我們應(yīng)該怎么辦谊娇？
   我們把這些編譯文件放到webpack配置文件中，讓webpack打包的時候罗晕，也去轉(zhuǎn)義node_modules里面的文件济欢！
   比如es5-shim這個庫，我們的引用方式如下面的配置文件小渊，我們的es3ify就使用es3ify-webpack-plugin來代替法褥，全部都集成到webpack配置文件中。

本文重要思想：不要僅僅考慮自己寫的代碼酬屉，也需要考慮package.json中引用的別的文件０氲取！呐萨！

其他的問題杀饵，我們可以自行搜索解決。對了我們當(dāng)時還刪除了webpack-hot-middleware,因為不兼容好像是～

具體配置文件如下：

var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var es3ifyPlugin = require('es3ify-webpack-plugin');
module.exports = {
    devtool: 'inline-source-map',
    entry: [
        "es5-shim", "es5-shim/es5-sham", 'babel-polyfill', './src/index'
    ],
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'bundle.js',
        publicPath: 'http://localhost:3000/'
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoErrorsPlugin(),
        new webpack.DefinePlugin({
            "process.env": {
                NODE_ENV: JSON.stringify('development')
            }
        }),
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: path.join(__dirname, 'assets/index-template.html')
        }),
        new es3ifyPlugin()
    ],
    resolve: {
        extensions: [
            '', ".js"
        ],
        root: path.join(__dirname, 'src')
    },
    module: {
        postLoaders: [
            {
                test: /\.js$/,
                loaders: ['export-from-ie8/loader']
            }
        ],
        loaders: [
            {
                test: /\.css$/,
                loader: 'style-loader!css-loader'
            }, {
                test: /\.js$/,
                loaders: ['babel-loader?cacheDirectory'],
                include: path.join(__dirname, 'src')
            }, {
                test: /\.styl$/,
                loaders: ['style-loader', 'css-loader', 'stylus-loader']
            }, {
                test: /\.(png|jpg|gif|svg)$/,
                loader: 'url-loader?limit=1'
            }, {
                test: /\.(htc)$/,
                loader: 'url-loader?limit=1'
            }
        ]
    }
};