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