入門webpack(二）webpack概論

• github地址
• 英文文檔
• 中文文檔

1.webpack是什麼？

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.

從官網（github）上的描述能夠看到webpack能夠將衆多模塊打包成不多的的資源，將代碼分割成細小的部分這樣使應用程序按須要加載代碼塊。經過loader，webpack能夠處理的模塊有不少，AMD定義的模塊，CommonJS，CSS，Images，SCSS等以及自定義模塊。

webpack自身只能處理js文件，處理非js模塊時須要經過loaders來處理。loaders是什麼，後面會介紹。

從上面的介紹中，咱們能夠看到webpack主要是一個前端資源加載和打包工具，在模塊化開發成爲主流的今天，他可以將複雜項目中的各個模塊按照必定的規則打包成細小的chunk(代碼塊)。而且能夠刪除模塊中沒有用到的代碼。

2.爲何須要webpack

• 複雜的項目涉及到不少模塊，若是一個模塊化開發的項目不通過打包處理，應用是沒法工做的，好比項目中使用CSS預處理語言SCSS編寫樣式，使用了AMD規範，使用了TypeScript那麼瀏覽器是沒法識別的，只有打包編譯後生成的文件瀏覽器才能編譯運行在客戶端。
• 打包工具的出現使得模塊化開發更加方便，打包後生成的靜態資源體積更小，加載運行速度更快。
• 使代碼能夠按須要加載

3.怎麼作

你須要學習webpack，瞭解掌握並熟練！