webpack 生产环境下插件用途

ExtractTextPlugin：独立css

 new ExtractTextPlugin({
      filename:'[name].[contenthash].css',
      allChunks: true,
    }),

UglifyJsPlugin：压缩js

 new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      output: {
        comments: false,  // remove all comments
      },
      compress: {
        warnings: true,
      }
}),

CopyWebpackPlugin：拷贝静态资源到编译目录

new CopyWebpackPlugin([
      {from: 'src/www/css', to: 'css'},
      {from: 'src/www/images', to: 'images'},
      // {from: 'src/www/model', to: 'app/model'},
    ]),

DefinePlugin：相当于定义全局变量

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

ChunkManifestPlugin：生成Manifest.json文件，（这个插件本身会有一点问题呢）

 new ChunkManifestPlugin({
      inlineManifest: true 
    }),

inlineManifest为true很重要，还需要在index.html加如下代码：(最终生成的文件里对路径的引用会是window.webpackManifest,而不是再把数据在文件加一遍，还是可以缩小一点点文件大小的)

<%= htmlWebpackPlugin.files.webpackManifest %>

CommonsChunkPlugin：提取公共文件

    new webpack.optimize.CommonsChunkPlugin({
        names: ['app','vendor'], //entry
        minChunks:Infinity
    }),
     new webpack.optimize.CommonsChunkPlugin({
      names: 'runtime' //单独的一个文件，处理逻辑
    }),

NamedModulesPlugin:生成的文件里面的modules路径会类似 ../react/..
HashedModuleIdsPlugin:生成的文件里面的modules路径会是哈希值。会缩小文件的

new webpack.NamedModulesPlugin(),
new webpack.HashedModuleIdsPlugin({
    hashDigestLength: 8
}),        

LodashModuleReplacementPlugin:Loadsh库，可以自行百度

new LodashModuleReplacementPlugin({
  path: true,
  flattening: true
})

HtmlWebpackPlugin和CleanWebpackPlugin我就不提了。