webpack基礎教程：（一）

1. 介紹 

1.1 webpack是更優秀的前端模塊依賴管理工具。它能把各類資源，例如JS（含JSX）、coffee、樣式（含less/sass）、圖片等都做爲模塊來使用和處理。他的目標是：

• 拆分依賴樹（dependency tree）爲多個按需加載的chunk
• 保證快速首屏加載
• 每種靜態資源均可成爲模塊
• 可以將第三方庫視做一個模塊來處理
• 可以定製模塊打包器的幾乎任何部分
• 大型項目的項目打包解決方案

　　1.2 既然全部資源都是模塊，那如何實現模塊依賴？

　　在 Webpack 當中, 全部的資源都被看成是模塊。

//典型的common JS格式
require("./lib.js");
require("./style.css");
require("./style.less");
require("./template.jade");
require("./image.png");

　　1.3 關於資源加載器

　　對應各類不一樣文件類型的資源，Webpack有對應的模塊loader

module: {
    //加載器配置
    loaders: [
        //.css 文件使用 style-loader 和 css-loader 來處理
        { test: /\.css$/, loader: 'style-loader!css-loader' },
        //.js 文件使用 jsx-loader 來編譯處理
        { test: /\.js$/, loader: 'jsx-loader?harmony' },
        //.scss 文件使用 style-loader、css-loader 和 sass-loader 來編譯處理
        { test: /\.scss$/, loader: 'style!css!sass?sourceMap'},
        //圖片文件使用 url-loader 來處理，小於8kb的直接轉爲base64
        { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}
    ]
}

 　　1.4 webpack的優點

• webpack 是以 commonJS 的形式來書寫腳本滴，但對 AMD/CMD 的支持也很全面，方便舊項目進行代碼遷移
• 一切資源皆是模塊
• 可以替代gulp/grunt等構建工具，提升開發效率
• 擴展性強，插件機制完善，特別是支持 React 熱插拔（見 react-hot-loader ）的功能讓人眼前一亮
• https://diamont1001.github.io/webpack-summary/

　　1.5 webpack工做原理

• Webpack 會分析入口文件，解析包含依賴關係的各個文件。這些文件（模塊）都打包到 output對象所設置的文件。
• Webpack 會給每一個模塊分配一個惟一的 id 並經過這個 id 索引和訪問模塊。
• 在頁面啓動時，會先執行 entry.js 中的代碼，其它模塊會在運行 require 的時候再執行。