怎樣學習webpack 走心分享

2022-03-08 12:54:15 字數 893 閱讀 6062

很多朋友可能都知道webpack,也見過webpack的**,但是不明白裡面一坨一坨的東西是什麼意思,到底有什麼用處!我們每個人學習乙個新東西可能都會有這個過程,但是我個人覺得webpack可能是最混沌的乙個東西,因為他得配置很多,功能很強大,讓很多人望而卻步。

下面就分享我之前學習的過程

乙個新事物我們不能要求自己把他得全部東西都學會了,也不能直接去看文件直接去寫demo,這樣的意義並不大,你看文件如果仔細看肯定能看得懂,但是你看過之後能記憶多少,對你自己有多大幫助那就說不准了,首先要明確我為什麼要學這個東西,他有什麼特性,能解決實際開發中的什麼問題,他得應用場景是什麼,有人說了與時俱進,好多公司都在用,我也要用,的確是很多公司都在用,但是為什麼都用呢?只是因為他是新東西嗎?他肯定是有一些獨特的特性,才會讓大家趨之若鶩。想想周邊的聲音就可以聽到webpack具體能做什麼,我們順著一些路子去摸索,去思考,把問題引出來,然後乙個乙個的擊破,問題解決的我們自然也就學會了。

2.webpack本身多種模組化方式 如 es6 cmd amd,現在肯定是用es6的了,當然cmd本身就是node採用的方式,我們知道es6的**是不能直接被瀏覽器支援的,那我們就會想到babel,再去查babel的配置,然後寫demo去實現

4.實現快取機制 也就是js檔名後面帶一串hash,hash是通過檔案內容進行生成的,我們在去查,進行測試,最終達到我們想要的結果

5.自動重新整理頁面 **熱更新等   這些都是我們要用到的特性,都可以作為我們的問題去查詢相關的解決方案,在通過測試進行修復

6.結合node web服務怎樣配置 ,也就是node層做為web伺服器,但同時webapck也需要做為監聽js**開啟服務,怎樣結合呢?

上面舉例了幾個實際的問題,其實學習乙個新技術,我們要先做到對這個東西的大致了解然後去挖掘問題,帶著問題去,解決問題過程就是學習的過程,其實就是一句話

webpack學習之路之webpack核心概念

webpack相關文件 webpack官網 webpack中文官網 webpack github位址 webpack 版本差異及修復bug webpack 主要4個核心概念 1 entry entry是某一段 的入口,這段 入口會告訴webpack 裡面有哪些模組的依賴。entry也是打包的入口,告...

webpack學習之webpack基本配置

壓縮檔案 分割 提取公用 模組合併 把多個模組合併 自動重新整理 熱更新 改變,自動重新整理頁面 由於外掛程式可以攜帶引數 選項,必須在 webpack 配置中,向 plugins 屬性傳入的是外掛程式的例項。let require clean webpack plguin new cleanweb...

如何學習 Webpack

tip 本文是 webpack howto 的原文,我覺得這篇文章寫得非常好,確實算是目前學習 webpack 入門的必讀文章。直接收錄之。這是一本教你如何應用webpack到你的專案中的工具書。它包含了我們在instagram中用到的絕大多數的內容。我的建議 這個教程作為你第乙個webpack的文...