[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 內置的優化
```
- 前端工具庫
- HTML
- CSS
- 實用樣式
- JavaScript
- 模擬運動
- 深入數組擴展
- JavaScript_補充
- jQuery
- 自定義插件
- 網絡 · 后端請求
- css3.0 - 2019-2-28
- 選擇器
- 邊界樣式
- text 字體系列
- 盒子模型
- 動圖效果
- 其他
- less - 用法
- scss - 用法 2019-9-26
- HTML5 - 2019-3-21
- canvas - 畫布
- SVG - 矢量圖
- 多媒體類
- H5 - 其他
- webpack - 自動化構建
- webpack - 起步
- webpack -- 環境配置
- gulp
- ES6 - 2019-4-21
- HTML5補充 - 2019-6-30
- 微信小程序 2019-7-8
- 全局配置
- 頁面配置
- 組件生命周期
- 自定義組件 - 2019-7-14
- Git 基本操作 - 2019-7-16
- vue框架 - 2019-7-17
- 基本使用 - 2019-7-18
- 自定義功能 - 2019-7-20
- 自定義組件 - 2019-7-22
- 腳手架的使用 - 2019-7-25
- vue - 終端常用命令
- Vue Router - 路由 (基礎)
- Vue Router - 路由 (高級)
- 路由插件配置 - 2019-7-29
- 路由 - 一個實例
- VUEX_數據倉庫 - 2019-8-2
- Vue CLI 項目配置 - 2019-8-5
- 單元測試 - 2019-8-6
- 掛載全局組件 - 2019-11-14
- React框架
- React基本使用
- React - 組件化 2019-8-25
- React - 組件間交互 2019-8-26
- React - setState 2019-11-19
- React - slot 2019-11-19
- React - 生命周期 2019-8-26
- props屬性校驗 2019-11-26
- React - 路由 2019-8-28
- React - ref 2019-11-26
- React - Context 2019-11-27
- PureComponent - 性能優化 2019-11-27
- Render Props VS HOC 2019-11-27
- Portals - 插槽 2019-11-28
- React - Event 2019-11-29
- React - 渲染原理 2019-11-29
- Node.js
- 模塊收納
- dome
- nodejs - tsconfig.json
- TypeScript - 2020-3-5
- TypeScript - 基礎 2020-3-6
- TypeScript - 進階 2020-3-9
- Ordinary小助手
- uni-app
- 高德地圖api
- mysql
- EVENTS
- 筆記
- 關于小程序工具方法封裝
- Tool/basics
- Tool/web
- parsedUrl
- request