webpack 1.x 學習總結

標籤：can   pil   種類   webp   title   any   into   內聯   span   

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 學習總結