webpack入門指南-step01

1、webpack是什麼？

web開發中經常使用到的靜態資源主要有JavaScript、CSS、圖片、Jade等文件，webpack中將靜態資源文件稱之爲模塊。webpack是一個模塊打包工具（命令行工具），其能夠兼容多種js書寫規範，且能夠處理模塊間的依賴關係，具備更強大的js模塊化的功能。 官方網站中用下圖清晰的描述了webpack採用不一樣的loader加載不一樣的資源文件，打包生成多個js文件，也能夠根據設置生成獨立的圖片、css文件等。 

 

 

2、爲何使用 webpack？

在以往的開發過程當中，常常會遇到如下三種狀況：

1. 項目中資源多樣性和依賴性 - js、css、png、less、jade等 爲了方便開發，咱們常常會使用不一樣的語法來編寫文檔，用less、sass、jade等會提升開發效率，但同時咱們須要藉助gulp或grunt來編寫任務編譯文件或對圖片進行壓縮等。
2. js模塊規範複雜化 - AMD、CommonJS、UMD、ES6等 requireJS主要用來處理AMD規範的js文件，若使用CommonJS規範的js庫文件，需進行AMD規範的封裝，才能正常使用。而browserify主要處理CommonJS規範的文件，其餘規範也須要進行轉化。近期ES6的興起，前面兩種打包工具已經不能知足咱們的需求了。
3. 開發與線上文件不一致性（打包壓縮形成影響）

webpack能夠很好地解決上面的問題，它具備Grunt、Gulp對於靜態資源自動化構建的能力，是一個出色的前端自動化構建工具、模塊化工具、資源管理工具。

3、webpack 特性

webpack具備requireJs和browserify的功能，但仍有不少本身的新特性：

1. 對 CommonJS 、 AMD 、ES6的語法作了兼容 2. 對js、css、圖片等資源文件都支持打包 3. 串聯式模塊加載器以及插件機制，讓其具備更好的靈活性和擴展性，例如提供對CoffeeScript、ES6的支持 4. 有獨立的配置文件webpack.config.js 5. 能夠將代碼切割成不一樣的chunk，實現按需加載，下降了初始化時間 6. 支持 SourceUrls 和 SourceMaps，易於調試 7. 具備強大的Plugin接口，大可能是內部插件，使用起來比較靈活 8.webpack 使用異步 IO 並具備多級緩存。這使得 webpack 很快且在增量編譯上更加快