webpack 經常使用plugin和loader

經常使用Loaders

less-loader, sass-loader
    處理樣式
    
url-loader, file-loader
    兩個都必須用上。不然超過大小限制的圖片沒法生成到目標文件夾中

babel-loader，babel-preset-es2015，babel-preset-react
    js處理，轉碼

expose?*
    eg:
    {
        test: require.resolve('react'),
        loader: 'expose?React'
    }

expose-loader
    將js模塊暴露到全局，若是

經常使用插件Plugin

config類

NormalModuleReplacementPlugin
        匹配resourceRegExp，替換爲newResource

        
    ContextReplacementPlugin
        替換上下文的插件
        
    IgnorePlugin
        不打包匹配文件
    
    PrefetchPlugin
        預加載的插件，提升性能
    
    ResolverPlugin
        替換上下文的插件
    
    ContextReplacementPlugin
        替換上下文的插件

optimize

DedupePlugin
        打包的時候刪除重複或者類似的文件
        
    MinChunkSizePlugin
        把多個小模塊進行合併，以減小文件的大小
        
    LimitChunkCountPlugin
        限制打包文件的個數
        
    MinChunkSizePlugin
        根據chars大小，若是小於設定的最小值，就合併這些小模塊，以減小文件的大小
    
    OccurrenceOrderPlugin
        根據模塊調用次數，給模塊分配ids，常被調用的ids分配更短的id，使得ids可預測，下降文件大小，該模塊推薦使用
        
    UglifyJsPlugin
        壓縮js
        
    ngAnnotatePlugin
        使用ng-annotate來管理AngularJS的一些依賴
     
    CommonsChunkPlugin
        多個 html共用一個js文件(chunk)

dependency injection

DefinePlugin
        定義變量，通常用於開發環境log或者全局變量
    
    ProvidePlugin
        自動加載模塊，當配置（$:'jquery'）例如當使用$時，自動加載jquery

other

HotModuleReplacementPlugin
        模塊熱替換,若是不在dev-server模式下，須要記錄數據，recordPath，生成每一個模塊的熱更新模塊
    
    ProgressPlugin
        編譯進度
        
    NoErrorsPlugin
        報錯但不退出webpack進程
    
    HtmlWebpackPlugin 
        生成html

經常使用alias

alias的配置項目，可以讓開發者指定一些模塊的引用路徑。對一些常常要被import或者require的庫，如react,咱們最好能夠直接指定它們的位置，這樣webpack能夠省下很多搜索硬盤的時間。

webpack好文推薦：
上面模塊只是大概瞭解，詳細可見：http://webpack.github.io/docs/
webpack優化使用：http://www.alloyteam.com/2016...
中文文檔：http://zhaoda.net/webpack-han...