一天濃縮學習webpack通過

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

已經不是第一次據說webpack，可是個人起步有點晚，如今纔看。開門見山~~

1.什麼是webpack？

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

2.爲何要有webpack等打包器？

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

  並且，若是單獨請求每一個模塊會形成請求次數過多，致使應用啓動緩慢，可是，將全部文件壓縮成一個文件，一次請求加載全部模塊會致使流量的浪費，初始化過程緩慢。

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

3.COMMONJS模塊，AMD模塊，CMD模塊，UMD模塊幾種經常使用模塊？

  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標準；

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

4.如何使用webpack？

僞裝你的電腦裏面已經安裝了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。通常是什麼功能就命名什麼。

下面就直接來試試：

(1)在項目裏面在新建一個名爲：style.css的文件：輸入 body{ background:green}

(2)修改entry.js  加入這一句  require("!style-loader!css-loader!./style.css")

(3)安裝Loader.  npm install css-loader style-loader     先用css-loader讀取它，再用style-loader將它插入頁面中。

(4)從新打包:webpack entry.js bundle.js

(5)刷新index.html頁面能夠看到效果。

若是有錯誤，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 就能夠查看效果