優化的具體思路如下：

1. 去除devtool選項

   很多教程都會教你在webpack.config.js中設定devtool選項，比如devtool: 'eval-source-map'。
   但是這隻適用於開發環境，這會造成打包的檔案往往有幾M，所以在生產環境必須去除此配置。
   

2. 分離CSS

   安裝外掛：
   

   npm install extract-text-webpack-plugin --save

   var ExtractTextPlugin = require("extract-text-webpack-plugin");
   
   ...
   
       loaders:[
         {
             test: /\.css$/,
             loader: ExtractTextPlugin.extract("style-loader"
    
   , "css-loader")
         },
         {
             test: /\.less$/,
             loader: ExtractTextPlugin.extract("style-loader", "css-loader!less-loader")
         },
   
         ...
   
   ...
   
   plugins: [
       ...
   
       new ExtractTextPlugin("bundle.css")
   ]

3. 使用webpack.optimize.UglifyJsPlugin外掛壓縮混淆JS程式碼，使用方法如下：

   a. 使用命令：webpack -p
   b. 在webpack.config.js檔案的plugins數組裡面新增及配置外掛，具體配置參考

   UglifyJS2文件

   new webpack.optimize.UglifyJsPlugin({
       warnings: false,
       compress: {
           join_vars: true,
           warnings: false,
       },
       toplevel: false,
       ie8: false,
   }),

4. 將React切換到產品環境

   在plugins中新增外掛
   

   new webpack.DefinePlugin({
     'process.env': {
         NODE_ENV: JSON.stringify(process.env.NODE_ENV),
     },
   }),
    
   

   打包時執行
   

   set NODE_ENV=production && webpack -p

5. 分離第三方庫

   在plugins中加入
   

   new webpack.optimize.CommonsChunkPlugin({
       filename:"common.js",
       name:"commons"
   });

6. 按需打包Lodash

   使用Lodash時，往往只需要使用其中部分功能，但整個檔案引入是不合理的，我們需要通過外掛讓Webpack按需引入模組。
   配置webpack.config.js
   

   var LodashModuleReplacementPlugin = require('lodash-webpack-plugin');
   var webpack = require('webpack');
   
   module.exports = {
       module: {
           loaders: [{
           loader: 'babel',
           test: /\.js$/,
           exclude: /node_modules/
        }]
    },
    babel: {
       presets: ['es2015'],
       plugins: ['transform-runtime', 'lodash']
    },
    plugins: [
       new LodashModuleReplacementPlugin,
       new webpack.optimize.OccurrenceOrderPlugin,
       new webpack.optimize.UglifyJsPlugin
    ]
   }

7. 非同步載入模組

   對於直接require或import的模組，Webpack的做法是把依賴的檔案都打包在一起，造成檔案很臃腫。
   所以在寫程式碼的時候要注意適度同步載入，同步的程式碼會被合成並且打包在一起。
   非同步載入的程式碼會被分片成一個個chunk，在需要該模組時再載入，即按需載入。
   

   require.ensure([], function(require){
       var list = require('./list');
       list.show();
   }, 'list');

   此時打包後的js檔名為：list.fb874860b35831bc96a8.js
   

8. 待補充