具體思路

• 1: 分離出業(yè)務(wù)代碼和第三方庫(kù)

• 2: 分離css

• 3: 清除打包后的文件中的注釋, 和copyright信息

• 4: 引入的React切換到產(chǎn)品版本
  如果引入的React沒有切換到產(chǎn)品版本，React給出了下面的Warning

Warning: It looks like you’re using a minified copy of the development build of React. When deploying React apps to production, make sure to use the production build which skips development warnings and is faster. See http://facebook.github.io/react/downloads.html for more details.
```

方法

1:分離出業(yè)務(wù)代碼和第三方庫(kù)

這里分別把 使用的 react, react-dom, jquery, react-router, 第三方庫(kù)提了出來(lái)單獨(dú)生成文件vendor.js

  entry: {
    bundle: path.join(__dirname, '../src/index'),
    vendor: ['react', 'react-dom', 'jquery','react-router']
  },

  plugins: [
    new webpack.optimize.CommonsChunkPlugin('vendor',  'vendor.js'),
  ]

2:分離css

首先安裝依賴: extract-text-webpack-plugin,

# 查看webpack版本, 如果高版本執(zhí)行命令: 
npm install --save-dev extract-text-webpack-plugin

# 低版本 執(zhí)行命令:  (我版本是: `1.13.1` 執(zhí)行的是低版本配置) 
npm install --save-dev extract-text-webpack-plugin@1.0.1

之后在webpack中進(jìn)行配置

**注意: ** 例子中配置中{publicPath: './'} 不是必填項(xiàng), 我這里是為了解決背景圖片打包或路徑不正確的問題, 具體請(qǐng)查看

const ExtractTextPlugin = require('extract-text-webpack-plugin');

  loaders: [
      {
        test: /\.less/,
        loader: ExtractTextPlugin.extract("style-loader", "css-loader!less-loader",{publicPath: './'})
      },

    ],
  // 打包后生成 styles.css 文件
  plugins: [
      new ExtractTextPlugin("style.css"),
    ],
  

3: 清除打包后的文件中的注釋, 和copyright信息

let webpack = require('webpack');

  plugins: [
         new webpack.optimize.UglifyJsPlugin({           //清除打包后文件中的注釋,和copyright信息
            output: {
              comments: false,
            },
            compress: {
              warnings: false
          }
        }),
    ],

4: 引入的React切換到產(chǎn)品版本

plugins: [
    new webpack.DefinePlugin({                                        // 把引入的React切換到產(chǎn)品版本
      'process.env.NODE_ENV': '"production"'
    }),
]