熟話說濃縮就是精華，哈哈，所以就這麽簡單粗暴的介紹下吧，寫下的都是精華。

已經不是第一次聽說webpack，但是我的起步有點晚，現在才看。開門見山~~

webpack是當下最熱門的前端資源模塊化管理和打包工具（就是一個打包器），可以將許多松散的模塊按照依賴和規則打包成符合生產環境部署的前端資源，還可以將需要加載的模塊進行代碼分離，等到實際需要的時候再進行異步加載。通過loader的轉換，任何資源都可以視作模塊，如COMMONJS模塊 ,AMD模塊，JS CSS ,JSON 等 ，它會根據模塊的依賴關系進行靜態分析，然後將這些模塊按照指定的規則生成對應的靜態資源。

平常的模塊加載方式都是在<script>標簽裏引入，這種情況是在全局作用模式window下的，這樣做的弊端就是只能按<script>的書寫順序進行加載，而且全局作用域下容易產生沖突，引入數量比較多的文件情況下難以管理。

而且，如果單獨請求每個模塊會造成請求次數過多，導致應用啟動緩慢，但是，將所有文件壓縮成一個文件，一次請求加載所有模塊會導致流量的浪費，初始化過程緩慢。

所以編譯的時候對所有的代碼進行靜態分析，分析出各個模塊的類型及依賴關系，然後將他們提交給適配的加載器處理，所以webpack就應運而生。

Commonjs：允許模塊通過require方法同步加載所需依賴的其他模式，然後通過exports或module.exports來導出需要暴露的接口。

eg： require("module");

       require("./script.js");

       export.doStuff=function(){};

       module.exports=someValue;

優點：各個模塊可以進行重用，npm中已經有許多可供使用的包。

缺點：只能是同步加載的，同步就意味著阻塞加載，所以不適合在瀏覽器環境中，因為瀏覽器的資源是同步加載的，不能非阻塞的並行加載多個模塊。

應用實例：nodejs

Amd模塊：它是在聲明模塊的時候就指定所有的依賴dependencies，並且還要當做形參傳到factory中，對於依賴的模塊提前執行依賴前置。

eg:  define("module", ["dep1", "dep2"], function(d1, d2){ return someExportedValue; });

   require(["module", "../file"],

   function(module, file) { /* ... */ });

優點：適合異步加載模塊，在瀏覽器環境中，並且可以並行運行多個模塊。和commonjs相反。

缺點：提前加好所有依賴，代碼要復雜很多。

應用實例：requirejs，curl

Cmd模塊：和AMD類似，並和Commonjs也有很大的兼容性。

eg: define(function(require, exports, module){

  var $ = require(‘jquery‘);

  var Spinning = require(‘./spinning‘);

  exports.doSomething = ... module.exports = ... })

優點：容易在nodejs中運行你的代碼

缺點：依賴spm打包，模塊的加載邏輯比較重、

應用實例：Sea.js

Umd模塊：主要解決模塊定義的跨平臺問題

eg:  import "jquery";

   export function doStuff() {}

   module "localModule" {}

優點：容易進行靜態分析，面向未來的ES標準；

缺點：原生瀏覽器不支持。

假裝你的電腦裏面已經安裝了Node.js, 然後輸入：npm install webpack -g ,可以通過webpack -h來查看安裝信息。

(1).假裝創建一個項目test,進入項目路徑，創建一個index.html頁面，代碼如下圖：

(2)然後再創建一個名為：bundle.js的文件，在上圖的index.html中引入它。此文件裏面什麽代碼都不需要寫。

(3)在創建一個名為entry.js的文件，不需要在index.html頁面引入喲，此文件裏面用來寫內容。

/**entry.js**/

document.write("hello world");

(4)然後將entry.js打包進bundle.js文件中，webpack會分析入口文件，解析包含依賴關系的各個文件，然後打包到bundle.js中

webpack entry.js bundle.js

webpack打包的原理就是給每一個模塊都分配一個唯一的id並通過這個id索引和訪問模塊，啟動時，會先執行entry.js裏面的代碼，其他模塊會在運行require的時候執行。

（5）此時打開bundle.js文件查看，你就可以發現裏面已經 有代碼了:

（6）運行inde.html頁面，在瀏覽器中就可以看到Hello world.

但是webpack本身是只能處理javascript模塊的，如果碰到css,json等其他模塊文件，就需要使用loader轉換。 loader就是一個裝換器，一個可以輸入任何資源但是最終都會幫你轉成js模塊的工具。

總的來說loader有以下幾點：

1.管道方式鏈式調用（允許多個文件轉換，最後必定輸出js文件） 。 2.loader可以同步或異步執行 3.倘若在nodejs環境下，可以做任何事情 4.loader加載時可以接受傳參。

5.可以通過文件擴展名來綁定不同類型的文件。 6.loader是通過Npm發布和安裝。7.通過定義package.json來指定，同樣也可以導出一個loader來使用，命名規則是：xxx-loader。一般是什麽功能就命名什麽。

下面就直接來試試：

如果有錯誤，cmd打包時就會顯示，index.html運行時，fireug也會顯示的。

loader轉換器還可以通過配置文件來執行喲

(1)通過往package.json裏面新增配置項來完成。deDependencies

(2)在新配置個webpack.config.js文件

var webpack = require(‘webpack‘)

module.exports = {
    resolve: { fallback: path.join(__dirname, "node_modules") },
    resolveLoader: { fallback: path.join(__dirname, "node_modules") },
    entry: ‘./entry.js‘,
    output: {
        path: __dirname,
        filename: ‘bundle.js‘
    },
    module: {
        loaders: [
            {test: /\.css$/, loader: ‘style!css‘}
        ]
    },
    plugins:[
        new webpack.BannerPlugin(‘This file is created by yu‘)
    ]

}

(3)直接運行webpack ，刷新index.html 就可以查看效果

入門webpack（濃縮學習webpack經過）