WebPack打包React项目, 减小打包后生成的js文件.

具体思路

• 1: 分离出业务代码和第三方库

• 2: 分离css

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

• 4: 引入的React切换到产品版本
  如果引入的React没有切换到产品版本，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:分离出业务代码和第三方库

这里分别把 使用的 react, react-dom, jquery, react-router, 第三方库提了出来单独生成文件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版本, 如果高版本执行命令: 
npm install --save-dev extract-text-webpack-plugin

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

之后在webpack中进行配置

**注意: ** 例子中配置中{publicPath: './'} 不是必填项, 我这里是为了解决背景图片打包或路径不正确的问题, 具体请查看

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切换到产品版本

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