[TOC] ``` webpack是基于NodeJs webpack把一切都看做是模塊 優化分為 開發優化、上線優化 開發構建流程：1.需求確認、2.本地開發(development)、3.構建發布(production)、4.代碼上線 項目開發：1.技術選型、2.目錄規范、3.確定依賴、4.模塊引入(依賴、插件)、5.數據請求(mock數據、本地服務器)、6.代碼解析、7.開發調試 ES6有一小部分語法是可以直接在瀏覽器上解析的，但絕大部分還不支持、需要借助工具解析 ``` ## :-: NodeJs基本使用 ``` npm -- 是包管理工具 - less (css預編譯) $ npm install -g less - less解析 $ lessc demo.less demo.css - uglify-js (js壓縮) $ npm install -g uglify-js - js壓縮 $ uglify demo.js -o demo.min.js - webpack $ npm install -g webpack ``` ## :-: 前端工程化概念 ``` 前端工程化： 1.前端工程化是一個思想，它不是一個技術、也不是一個框架 2.前端工程化是根據業務特點，將前端開發流程規范化、標準化。用于提升前端工程師的開發效率和代碼質量。 開發 --> 測試 --> 部署 模塊化、組件化 是前端工程化的體現、(高內聚低耦合) 前端模塊化： js模塊化、css模塊化 1.將共同的代碼抽離，有助于代碼的復用、 防止命名沖突：函數->命名空間->閉包->模塊引入 模塊化規范：CommonJs、AMD、CMD、Es6 CommonJs -- [同步加載] node環境的規范，最初用在服務器端。適合服務器端，不適應瀏覽器(不兼容，原因瀏覽器缺少 module、exports、require、global 環境變量)。需要使用可以用工具轉換(broeserify)。 broeserify -- 工具，可以將CommonJs模塊編譯成瀏覽器可以使用的模塊。 安裝：$ install -g broeserify 使用：$ broeserify main.js -o bundle.js 導出 -- module.exports = {abc:123}; 導入 -- var m1 = require('./modules/m1'); // {abc:123} AMD -- [異步加載]適合瀏覽器，AMD依賴前置，不能按需加載。AMD規范的使用依賴于require.js。 define(moduleID,['module_1',['module_2'],function(m1,m2){···}); CMD -- [異步加載]跟AMD的主要區別在于，AMD依賴前置，CMD不依賴前置，可以按需加載。 Es6 -- [異步加載]自帶模塊化，通過babel工具語法降級。功能比前幾個方案(CommonJs、AMD、CMD)更為強大。 1.模塊化是指將一個復雜的系統分解為多個模塊，方便編碼。 2.可以降低復雜性，降低代碼耦合度，部署方便，提高效率。 3.模塊化的好處： a.避免命名沖突，減少變量空間污染。 b.更好的分離代碼，按需加載。 c.更高的復用性。 d.更高可維護性。 前端組件化： 頁面UI拆分 ``` ``` 自動化構建工具：Webpack、Gulp、Grunt、Fis ... 構建工具 就是將源代碼轉換成可以直接執行的JavaScript、Css、HTML代碼。 自動化 讓代碼自動化地執行這一系列復雜的流程(代碼轉換、文件優化、代碼分割、模塊合并、自動刷新、代碼校驗、自動發布) 構建工具的選型： a.是否符合團隊的技術棧 b.是否符合項目的需求 c.生態圈是否完善、社區是否活躍(被支持的程度) webpack優點： a.專注于處理模塊化的項目 b.可通過plugin擴展，完整好用不失靈活 c.使用場景不局限于web開發 d.社區活躍，緊跟時代發展的新特性 e.良好的開發體驗 ``` ## :-: webpack - 安裝 ``` - 先安裝cnpm (淘寶鏡像：http://npm.taobao.org) $ npm install -g cnpm --registry=https://registry.npm.taobao.org - 將webpack安裝到全局 $ cnpm install webpack -g - 安裝webpack-cli $ cnpm install webpack-cli -g - 查看webpack版本號 $ webpack -v - 初始化工程 $ cnpm init -y // 會生成 package.json - 下載安裝局部的webpack （） $ cnpm install webpack --save-dev $ cnpm install webpack --D // 簡寫 $ cnpm install webpack // 不加 --save-dev 默認為局部 $ cnpm install jQuery --save-dev ``` ## :-: webpack核心概念 ``` 入口(entry) 入口起點(entry point)指示 webpack 應該使用哪個模塊，來作為構建其內部依賴圖的開始。進入入口起點后，webpack 會找出有哪些模塊和庫是入口起點（直接和間接）依賴的。 出口(output) output 屬性告訴 webpack 在哪里輸出它所創建的 bundles，以及如何命名這些文件，默認值為 ./dist。基本上，整個應用程序結構，都會被編譯到你指定的輸出路徑的文件夾中。你可以通過在配置中指定一個 output 字段，來配置這些處理過程： loader loader 讓 webpack 能夠去處理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以將所有類型的文件轉換為 webpack 能夠處理的有效模塊，然后你就可以利用 webpack 的打包能力，對它們進行處理。 插件(plugins) loader 被用于轉換某些類型的模塊，而插件則可以用于執行范圍更廣的任務。插件的范圍包括，從打包優化和壓縮，一直到重新定義環境中的變量。插件接口功能極其強大，可以用來處理各種各樣的任務。 模式 通過選擇 development 或 production 之中的一個，來設置 mode 參數，你可以啟用相應模式下的 webpack 內置的優化 ```