webpack介紹（from github）：

　　A bundler for javascript and friends. Packs many modules into a few bundled assets. Code Splitting allows to load parts for the application on demand. Through "loaders," modules can be CommonJs, AMD, ES6 modules, CSS, Images, JSON, Coffeescript, LESS, ... and your custom stuff. ——from github

總之意思就是說webpack是一個打包工具，他可以通過“代碼分割”打包的時候包含所需要的部分，通過loader處理各種類型包含commonjs、amd、es6、css、iamge等等各種類型的文件。

各類文件處理方式：

　　webpack相比較grunt按照任務執行操作，他是根據文件類型處理文件。項目中主要的文件類型有html、css、less/sass、image、tpl(模板文件)、js.下面分別進行說明：

　　.html:

　　　　處理html文件需要html-laoder，webpack.config.js配置文件中的配置方式如下所示：　　　　

{
    test:/\.html/,
    loader:‘html-loader‘
},

　　　　html進行更加復雜操作需要html-webpack-plugin插件，配置如下圖所示：

plugins:[
    new htmlWebpackPlugin({
        filename:‘a.html‘,
        template:"index.html",
        inject:‘body‘,//body head false
        title:‘webpack is a‘,
        chunks:[‘a‘]
        //excludeChunks:[‘c‘],
        minify:{
            removeComments:true,
            collapseWhitespace:true
        }
    })
]
ps參數說明：
Filename:打包後文件名
Template:模板對象
Inject:body/head/false(不自動註入)
Minify:removeComments/collapseWhitespace（壓縮）
Chunks:包含哪些chunk
excludeChunks:不包含哪個chunk
自定義參數：可在模板中通過<%=xxx%>方式獲取
compilation.assets[路徑].source()：內聯插入

　　.js:

　　　　webpack可以處理普通js,對於es6(CSMAScript-262第六次修改，也叫ECMA2015)語法需要轉換成普通js,因此需要一個轉換器--babel,babel需要知道你想要轉換哪些es6特性。通過presets可以設置，轉換哪些特性，設置presets的值為latest或者env則轉換所有特性，配置如下：

module:{
    loaders:[
        {
            test:/\.js$/,
            loader:‘babel-loader‘,
            include:path.resolve(__dirname,"src"),
            exclude:path.resolve(__dirname,"node_modules"),
            query:{
                presets:[‘latest‘]
            }
        }
    ]
}
因為babel處理比較耗時，特制定include(指定掃描哪些路徑)與exclude（指定掃描排除哪些路徑）

　　.css:

　　　　css-loader用於處理css文件 style-loader用於將css-loader處理後的文件插入到頁面中（建立style標簽）

{
    test:/\.css$/,
    loader:‘style-loader!css-loader‘
},

　　.css/less:

　　　　less文件通過less-loader處理，處理後仍需要css-loader和style-loader，如有需要還需要post-css-loader(增加瀏覽器前綴)

{
    test:/\.less$/,
    loader:‘style-loader!css-loader!less-loader‘
}

　　.jpg...:

　　　　處理圖片文件可以使用file-loader和url-loader,兩者的區別：file-loader負責加載圖片，url-loader可以設置一個limit值，當圖片大小大於該閾值時使用file-loader加載，當圖片小於該閾值時會被硬編碼成base64格式，添加到文件中。配置如下所示：

{
    test:/\.(jpg|png|gif|svg)/,
    loader:‘file-loader‘,//url-loader
    query:{
        name:‘static/[name]-[hash].[ext]‘,
        //limit:‘20000‘ //單位b
    }
    //test:/\.(jpg|png|gif|svg)/i,
    //loaders:[
    //    ‘url-loader?limit=20000&name=assets/[name]-[hash:5].[ext]‘,
    //    ‘image-webpack‘
    //]

}

　　.tpl

　　tpl主要是指項目中用到的各種模板文件，比如ejs/jade.....我們需要安裝響應的“loader”，以ejs為例，首先要安裝ejs-loader

{
    test:/\.tpl/,
    loader:‘ejs-loader‘
}

　　了解到的只是webpack打包冰山一角，持續跟進webpack中。。。。

webpack 1.x 學習總結