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我就不提了。