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...