關於webpack4的14個知識點,童叟無欺

沒有什麼比時間更具備說服力了，由於時間無需通知咱們就能夠改變一切。     

最近工做中用到了nuxt,才發現,若是webpack學的6,nuxt基本不須要學習,沒什麼學習成本的,所以,這篇從新記錄下webpack4的一些基礎知識點,下一篇將會配置一個優化到極致的react腳手架,也但願你們可以持續關注,配置webpack就是優化優化再優化,哈哈~

酒壯慫人膽,我學這個的辦法就是先把這些東西基本就分3步,

1. 首先,將這些必要的配置,以及某些loader,某些插件,像語文課文同樣默讀,並背誦(這一步最重要)
2. 動手去實踐,去試錯
3. 理解其原理

好了,正式開始

前言

Webpack能夠看作是模塊打包機：它作的事情是，分析你的項目結構，找到JavaScript模塊以及其它的一些瀏覽器不能直接運行的拓展語言（Scss，TypeScript等），並將其打包爲合適的格式以供瀏覽器使用。

WebPack和Grunt以及Gulp相比有什麼特性

其實Webpack和另外兩個並無太多的可比性，Gulp/Grunt是一種可以優化前端的開發流程的工具，而WebPack是一種模塊化的解決方案，不過Webpack的優勢使得Webpack在不少場景下能夠替代Gulp/Grunt類的工具。

1. Entry：入口，Webpack 執行構建的第一步將從 Entry 開始，可抽象成輸入。
2. Module：模塊，在 Webpack 裏一切皆模塊，一個模塊對應着一個文件。Webpack 會從配置的 Entry 開始遞歸找出全部依賴的模塊。
3. Chunk：代碼塊，一個 Chunk 由多個模塊組合而成，用於代碼合併與分割。
4. Loader：模塊轉換器，用於把模塊原內容按照需求轉換成新內容。
5. Plugin：擴展插件，在 Webpack 構建流程中的特定時機注入擴展邏輯來改變構建結果或作你想要的事情。
6. Output：輸出結果，在 Webpack 通過一系列處理並得出最終想要的代碼後輸出結果。

1. 從0開始配置結構

• 初始化項目結構

 

 

2. 配置webpack.config.js

• 在項目根目錄新建webpack.config.js

 

 

3. 配置開發服務器

 

 

4. 打包js

 

 

5. 支持ES6,react,vue

 

 

6. 處理css,sass,以及css3屬性前綴

處理css

 

 

動態卸載和加載CSS

style-loader爲 css 對象提供了use()和unuse()兩種方法能夠用來加載和卸載css

好比實現一個點擊切換顏色的需求，修改index.js

 

 

處理sass

 

 

提取css文件爲單獨文件

 

 

7.產出html

 

 

8. 處理引用的第三方庫,暴露全局變量

webpack.ProvidePlugin參數是鍵值對形式，鍵就是咱們項目中使用的變量名，值就是鍵所指向的庫

 

 

9. code splitting、懶加載(按需加載)

說白了就是在須要的時候在進行加載，好比一個場景，點擊按鈕才加載某個js.

 

 

10. JS Tree Shaking

 

 

11. 圖片處理

 

 

12. Clean Plugin and Watch Mode

清空目錄，文件有改動就從新打包

 

 

13. 區分環境變量

 

 

14. 開發模式與webpack-dev-server,proxy

 

 

到這裏基本就結束了,以爲有幫助,不妨點個贊,不足之處，還望斧正~

做者：張不慫 連接：https://juejin.im/post/5cea1e1ae51d4510664d1652 來源：掘金 著做權歸做者全部。商業轉載請聯繫做者得到受權，非商業轉載請註明出處。