資訊專欄INFORMATION COLUMN
摘要：在學(xué)習(xí)過程中把自己看到的，學(xué)過的一些東西總結(jié)出來，供大家參考。在學(xué)習(xí)之前必須了解的幾個(gè)概念。通過或是使再次打包文件名不變。在中是通過來來需要使用
這段時(shí)間一直在學(xué)習(xí)webpack,感覺webpack的功能太強(qiáng)大了。在學(xué)習(xí)過程中把自己看到的，學(xué)過的一些東西總結(jié)出來，供大家參考。在學(xué)習(xí)webpack之前必須了解的幾個(gè)概念。
什么是webpack和grunt和gulp有什么不同
Webpack是一個(gè)模塊打包器，他可以遞歸的打包項(xiàng)目中的所有模塊，最終生成幾個(gè)打包后的文件。他和其他的工具最大的不同在于他支持code-splitting,模塊話(AMD，ESM,CommonJS),全局分析
什么是bundle,什么是chunk,什么是module?
Bundle是由webpack打包出來的文件，chunk是指webpack在進(jìn)行模塊的依賴分析的時(shí)候，代碼分割出來的代碼塊。Module是開發(fā)中的單個(gè)模塊
什么是loader?什么是plugin?
Loaders是用來告訴webpack如何轉(zhuǎn)化處理某一類型的文件，并且引入到打包出的文件中
Plugin是用來自定義webpack打包過程的方式，一個(gè)插件是含有apply方法的一個(gè)對(duì)象，通過這個(gè)方法可以參與到整個(gè)webpack打包的各個(gè)流程(生命周期)
webpack-dev-server 和http服務(wù)器如nginax有什么區(qū)別？
Webpack-dev-server使用內(nèi)存來存儲(chǔ)webpack開發(fā)環(huán)境下的打包文件，并且可以使用模塊熱更新，他比傳統(tǒng)的http服務(wù)對(duì)開發(fā)更簡單高效
什么是模塊熱更新
模塊熱更新是webpack的一個(gè)功能，他可以使得代碼修改過后不用刷新瀏覽器就可以更新，是高級(jí)版的自動(dòng)刷新瀏覽器
什么是長緩存？在webpack中如何做到長緩存優(yōu)化？
瀏覽器在用戶訪問頁面的時(shí)候，為了加快加載速度，會(huì)對(duì)用戶訪問的靜態(tài)資源進(jìn)行存儲(chǔ)，但是每一次代碼升級(jí)或是更新，都需要瀏覽器去下載新的代碼，最方便和簡單的更新方式就是引入新的文件名稱。在webpack中可以在output給輸出的文件指定chunkhash，并且分離經(jīng)常更新的代碼和框架代碼。通過NamedModulesPlugin或是HashedModuleIdsPlugin使再次打包文件名不變。
什么是Tree-shaking?css可以使用Tree-shaking嗎？
Tree-shaking是指在打包中去除那些引入了，但是在代碼中沒有被用到的那些死代碼。在webpack中Tree-shaking是通過uglifyJSPlugin來Tree-shaking來Tree-shaking JS.CSS 需要使用Purify-CSS
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://hztianpu.com/yun/108213.html
摘要：網(wǎng)上有很多前端的學(xué)習(xí)路徑文章，大多是知識(shí)點(diǎn)羅列為主或是資料的匯總，數(shù)據(jù)量讓新人望而卻步。天了解一個(gè)前端框架。也可以關(guān)注微信公眾號(hào)曉舟報(bào)告，發(fā)送獲取資料，就能收到下載密碼，網(wǎng)盤地址在最下方，獲取教程和案例的資料。 前言 好的學(xué)習(xí)方法可以事半功倍，好的學(xué)習(xí)路徑可以指明前進(jìn)方向。這篇文章不僅要寫學(xué)習(xí)路徑，還要寫學(xué)習(xí)方法，還要發(fā)資料，干貨滿滿，準(zhǔn)備接招。 網(wǎng)上有很多前端的學(xué)習(xí)路徑文章，大多是知...
摘要：更新日志更新完成靜態(tài)頁面原型修復(fù)使用的正確姿勢更新添加靜態(tài)頁面更新添加使用方法請戳我主要作用就是在你開發(fā)環(huán)節(jié)在后端同學(xué)還未開發(fā)完成的情況下，提供一個(gè)。 底下評(píng)論說是標(biāo)題黨，或者是光扔個(gè)github地址上來的同學(xué)我就不說什么了。你們有看看倉庫的提交記錄么？我還沒有吃撐到開個(gè)倉庫去騙star.我的出發(fā)點(diǎn)就是每天更新一部分代碼，教大家用我所提到的技術(shù)棧搭建一個(gè)blog，我的出發(fā)點(diǎn)就是這么簡單...
摘要：那時(shí)候所配置的任務(wù)監(jiān)聽匹配文件的變化自動(dòng)刷新瀏覽器自動(dòng)編譯自動(dòng)補(bǔ)全前綴多雪碧圖合并拼圖等等基于編譯圖片的任務(wù)，已經(jīng)是完全滿足我們的需求了。直至到后來在雪碧圖的合并，多倍圖的輸出上，在上苦苦找尋不了比較完美的解決方案等等。 折騰 從 2015 到現(xiàn)在，短短的三年內(nèi)，幾乎每年折騰一下工作流的 更新?lián)Q代 。從最早開始使用 Grunt 到 Gulp 再到 Webpack，再到 Rollup，...
摘要：這兩天一直在練習(xí)這個(gè)發(fā)現(xiàn)有好多問題和坑，做開發(fā)嘛，一定要有喜歡出問題并喜歡解決問題，堅(jiān)決踩個(gè)坑填個(gè)坑的不怕死小強(qiáng)精神在配置上其實(shí)是可以是想和的，會(huì)根據(jù)進(jìn)行對(duì)打包，壓縮，下面自動(dòng)壓縮，親測沒有問題但是從里面分離出來的怎么打包呢我找了一天的相關(guān) 這兩天一直在練習(xí)這個(gè)webpack4, 發(fā)現(xiàn)有好多問題和坑，做開發(fā)嘛，一定要有喜歡出問題并喜歡解決問題，堅(jiān)決踩個(gè)坑填個(gè)坑的不怕死小強(qiáng)精神！ web...
摘要：在這種背景下，誕生了很多工具很多前端工作流程。目前我們很多時(shí)候常說的前端工程師，其實(shí)主要指的就是其工程師。所以就是來解決這些問題的最后至此前端的一個(gè)工作結(jié)構(gòu)介紹至此結(jié)束。 這個(gè)時(shí)代不懂點(diǎn)前端知識(shí)，真的沒有辦法生存。就算不會(huì)寫，也得了解它的原理吧！ 最近做了一些總結(jié)，之前都是迷迷糊糊，搞不清楚前端之前的相關(guān)定位。好好梳理了一下。錯(cuò)誤之處請各位指正。 本文主要說的是 JavaScript ...
閱讀 891·2021-09-06 15:02
閱讀 2513·2019-08-30 15:43
閱讀 2309·2019-08-30 11:26
閱讀 2442·2019-08-26 12:12
閱讀 3614·2019-08-23 18:24
閱讀 3362·2019-08-23 18:16
閱讀 768·2019-08-23 17:02
閱讀 2327·2019-08-23 15:34
