react項目下webpack版本更新致使的配置報錯解決方案

webpack1.x項目配置，在更新webpack版本時出現的問題解決

問題一：

resolve:{
    // 引入文件不寫後綴名配置
    extensions:['', '.js','.jsx']
}

配置時 extensions 第一個參數不能是空，改成 extensions:['.js','.jsx']

問題二：

配置postcss有誤，webpack2.0以上再也不容許配置自定義屬性，須要再plugin中定義
修改前

postcss: [
        require('autoprefixer') //調用autoprefixer插件，例如 display: flex
]

修改後
在 plugin中新增

new webpack.LoaderOptionsPlugin({
  options: {
    postcss: function () {
      return [autoprefixer];
    }
  }
})

問題三：

webpack-dev-server配置再也不有colors屬性

devServer: {
        // colors: true, //終端中輸出結果爲彩色
        historyApiFallback: true, //不跳轉，在開發單頁應用時很是有用，它依賴於HTML5 history API，若是設置爲true，全部的跳轉將指向index.html
        inline: true, //實時刷新
        hot: true  // 使用熱加載插件 HotModuleReplacementPlugin
    }

問題四：

使用加載器時再也不容許 省略‘-loader’後綴
修改前：

module: {
        loaders: [
            { test: /\.(js|jsx)$/, exclude: /node_modules/, loader: 'babel' },
            { test: /\.less$/, exclude: /node_modules/, loader: 'style!css!postcss!less' },
            { test: /\.css$/, exclude: /node_modules/, loader: 'style!css!postcss' },
            { test: /\.(png|gif|jpg|jpeg|bmp)$/i, loader:'url-loader?limit=5000' },  // 限制大小5kb
            { test: /\.(png|woff|woff2|svg|ttf|eot)($|\?)/i, loader:'url-loader?limit=5000'} // 限制大小小於5k
        ]
    }

修改後：

module: {
        loaders: [
            { test: /\.(js|jsx)$/, exclude: /node_modules/, loader: 'babel-loader' },
            { test: /\.less$/, exclude: /node_modules/, loader: 'style-loader!css-loader!postcss-loader!less-loader' },
            { test: /\.css$/, exclude: /node_modules/, loader: 'style-loader!css-loader!postcss-loader' },
            { test: /\.(png|gif|jpg|jpeg|bmp)$/i, loader:'url-loader?limit=5000' },  // 限制大小5kb
            { test: /\.(png|woff|woff2|svg|ttf|eot)($|\?)/i, loader:'url-loader?limit=5000'} // 限制大小小於5k
        ]
    }

問題五：

postcss配置有誤，更換引入的方式,建立postcss.config.js文件，添加代碼以下：

var autoprefixer = require('autoprefixer');
module.exports = {
  plugins: {
    'autoprefixer': {browsers: 'last 5 version'}
  }
}

在webpack2.6版本 能夠經過直接在webpack.config.js中添加以下代碼使用：

plugins: [  
        new webpack.LoaderOptionsPlugin({  
            options: {  
                postcss: function(){  
                    return [  
                        require("autoprefixer")({  
                            browsers: ['ie>=8','>1% in CN']  
                        })  
                    ]  
                }  
            }  
        })  
]

至此，更新了webpack之後執行npm start(看本身配置是怎樣的，package.json的scripts配置)，應該就能夠跑起來了，有什麼不對的地方，望指教。