最近工作中用到了nuxt,才發(fā)現(xiàn),如果webpack學(xué)的6,nuxt基本不需要學(xué)習(xí),沒什么學(xué)習(xí)成本的,因此,這篇重新記錄下webpack4的一些基礎(chǔ)知識(shí)點(diǎn),下一篇將會(huì)配置一個(gè)優(yōu)化到極致的react腳手架,也希望大家能夠持續(xù)關(guān)注,配置webpack就是優(yōu)化優(yōu)化再優(yōu)化,哈哈~
酒壯慫人膽,我學(xué)這個(gè)的辦法基本就分3步：
- 首先,將這些必要的配置,以及某些loader,某些插件,像語文課文一樣默讀,并背誦(這一步最重要)
- 動(dòng)手去實(shí)踐,去試錯(cuò)
- 理解其原理
好了,正式開始
前言
Webpack可以看做是模塊打包機(jī)：它做的事情是匠抗，分析你的項(xiàng)目結(jié)構(gòu)，找到JavaScript模塊以及其它的一些瀏覽器不能直接運(yùn)行的拓展語言（Scss污抬，TypeScript等）汞贸，并將其打包為合適的格式以供瀏覽器使用。
WebPack和Grunt以及Gulp相比有什么特性
其實(shí)Webpack和另外兩個(gè)并沒有太多的可比性印机，Gulp/Grunt是一種能夠優(yōu)化前端的開發(fā)流程的工具司草，而WebPack是一種模塊化的解決方案挠乳，不過Webpack的優(yōu)點(diǎn)使得Webpack在很多場(chǎng)景下可以替代Gulp/Grunt類的工具。
- Entry：入口，Webpack 執(zhí)行構(gòu)建的第一步將從 Entry 開始专控，可抽象成輸入。
- Module：模塊继薛，在 Webpack 里一切皆模塊饲齐，一個(gè)模塊對(duì)應(yīng)著一個(gè)文件。Webpack 會(huì)從配置的 Entry 開始遞歸找出所有依賴的模塊腐魂。
- Chunk：代碼塊帐偎，一個(gè) Chunk 由多個(gè)模塊組合而成，用于代碼合并與分割蛔屹。
- Loader：模塊轉(zhuǎn)換器削樊，用于把模塊原內(nèi)容按照需求轉(zhuǎn)換成新內(nèi)容。
- Plugin：擴(kuò)展插件，在 Webpack 構(gòu)建流程中的特定時(shí)機(jī)注入擴(kuò)展邏輯來改變構(gòu)建結(jié)果或做你想要的事情漫贞。
- Output：輸出結(jié)果甸箱，在 Webpack 經(jīng)過一系列處理并得出最終想要的代碼后輸出結(jié)果。
1. 從0開始配置結(jié)構(gòu)
- 初始化項(xiàng)目結(jié)構(gòu)
2. 配置webpack.config.js
- 在項(xiàng)目根目錄新建webpack.config.js
3. 配置開發(fā)服務(wù)器
4. 打包js
5. 支持ES6,react,vue
6. 處理css,sass,以及css3屬性前綴
處理css
動(dòng)態(tài)卸載和加載CSS
style-loader為 css 對(duì)象提供了use()和unuse()兩種方法可以用來加載和卸載css
比如實(shí)現(xiàn)一個(gè)點(diǎn)擊切換顏色的需求迅脐，修改index.js
處理sass
提取css文件為單獨(dú)文件
7.產(chǎn)出html
8. 處理引用的第三方庫,暴露全局變量
webpack.ProvidePlugin參數(shù)是鍵值對(duì)形式芍殖，鍵就是我們項(xiàng)目中使用的變量名，值就是鍵所指向的庫
9. code splitting谴蔑、懶加載(按需加載)
說白了就是在需要的時(shí)候在進(jìn)行加載豌骏，比如一個(gè)場(chǎng)景，點(diǎn)擊按鈕才加載某個(gè)js.
10. JS Tree Shaking
11. 圖片處理
12. Clean Plugin and Watch Mode
清空目錄隐锭，文件有改動(dòng)就重新打包
13. 區(qū)分環(huán)境變量
14. 開發(fā)模式與webpack-dev-server,proxy
到這里基本就結(jié)束了,覺得有幫助,不妨點(diǎn)個(gè)贊,不足之處窃躲，還望斧正~
求點(diǎn)贊，求關(guān)注~
