webpack基礎

1、模塊化

CommonJS、AMD和ES6 Module規範（另外還有CMD、UMD等），下面咱們來簡單看一下：

一、CommonJS

nodejs普遍應用得一種模塊化規範, 是一種 同步加載 模塊依賴的方式；

• require：引入一個模塊
• exports：導出模塊內容
• module：模塊自己

二、AMD

JS模塊加載庫RequireJS提出而且完善的一套模塊化規範，AMD 是一條 異步加載 模塊依賴的方式；

• id：模塊的 id
• dependencies：模塊依賴
• factory：模塊的工廠函數，即模塊的初始化操做函數
• require：引入模塊

三、ES6 Module

ES6 推出的一套模塊化規範。

• import：引入模塊依賴
• export：模塊導出

Tips：除了上面三大主流規範，還有

• CMD（國產庫 SeaJS 提出來的一套模塊規範）
• UMD（兼容 CommonJS 和 AMD 一套規範）。

目前多數模塊的封裝，既能夠在 Node.js 環境又能夠在 Web 環境運行，因此通常會採用 UMD 的規範，後面 Webpack 針對 lib 庫的封裝會有進一步介紹。

2、webpack解決什麼問題

一、Grunt、Gulp 缺陷

• 打包的思路是：遍歷源文件 → 匹配規則 → 打包
• 缺陷：作不到按需加載，到底頁面用不用，打包過程當中是不關心的

二、webpack得好處

• 不一樣之處：從 入口文件 開始，通過模塊依賴加載、分析和打包三個流程完成構建。
• 優點：達到按需加載的目的，好比code split（拆分公共代碼等）。

三、webpack解決的問題

• 模塊化打包，一切皆模塊，JS 是模塊，CSS 等也是模塊；
• 語法糖轉換：好比 ES6 轉 ES五、TypeScript；
• 預處理器編譯：好比 Less、Sass 等；
• 項目優化：好比壓縮、CDN；
• 解決方案封裝：經過強大的 Loader 和插件機制，能夠完成解決方案的封裝，好比 PWA；
• 流程對接：好比測試流程、語法檢測等。