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