模塊化打包工具 -- webpack · 前端工程化學習筆記

[TOC] >[success] # 模塊化打包工具 [前端模塊化](http://www.hmoore.net/cyyspring/more/921044) ~~~ 1.前端在整個歷史的演變，最后提出的解決方案是'esm',使得前端可以解決以前模塊化里程的各種問題，這些問題解決的都是開發階段多文件的劃分的模塊化，但是在實際正式環境然需要考慮下面幾個問題 1.1.ES Modules 存在環境兼容問題這個問題隨著時間推移將會被解決 1.2.模塊文件過多，網絡請求頻繁，影響工作效率，模塊化導致問題就是我們會細致的劃分文件，導致文件請求變多，這個解決方法也可以通過http2 /http3 來解決 1.3.所有的前端資源都需要模塊化，現有的'esm'只是把js 進行了模塊化，但是前端是由'css','圖片'.'字體' 這些個個文件組成，因此需要模塊化的是前端所有資源不是單單的js文件 2.解決上面問題就需要引入新的前端開發工具 2.1.新特性代碼編譯，將包含新特性代碼轉換成大多數瀏覽器能夠兼容的代碼如ES6 => ES5，這些可以通過glup 這些自動化構建工具幫助實現 2.2.解決文件過多，導致請求過多的問題，我們可以設想在開發階段依舊是模塊化多文件的形式，但是在打包的時候，可以講過這些模塊化的文件打包成一個文件 2.3.支持不同種類的前端資源類型，可以將其當作模塊使用 ~~~ * 針對上面1.2補充 ~~~ 1.首先明確一個前提模塊化開發只是在開發階段需要的，實際業務上線后對項目正常運行拋開優化來說本質是沒有影響的，如果采用過多的模塊化開發，就以瀏覽器支持的'esm' 的形式為例因為模塊劃分越細導致瀏覽器請求越多反而可能出現速度變慢的情況，這就是為什么我們需要打包工具有時候將一些js 文件統一生成一個 'Bundle.js' 2.下面做一個案例說明,雖然看似之引入了一個'script' 標簽但實際相互關聯的esm 依舊會加載 ~~~ ~~~ └─ 02-configuation ├── src │ ├── heading.js │ └── index.js └── index.html ~~~ ~~~ // ./src/heading.js export default () => { const element = document.createElement('h2') element.textContent = 'Hello webpack' element.addEventListener('click', () => alert('Hello webpack')) return element } ~~~ ~~~ // ./src/index.js import createHeading from './heading.js' const heading = createHeading() document.body.append(heading) ~~~ ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Webpack - 快速上手</title> </head> <body> <script type="module" src="src/index.js"></script> </body> </html> ~~~ ![](https://img.kancloud.cn/2b/8c/2b8c87969709739423681abf04667ca4_448x148.png) * 根據上面說的可以思考得到一個模型圖 ~~~ 1.我們將'js' 模塊化的代碼在打包生成階段編程es5語法，并且將他們這些模塊化后會導致請求文件變多的'js' 統一給他們生成在一個js文件中'Bundle.js',并且不單單的對js 進行模塊化，會對不同種類的前端資源類型支持就像'css' ,'圖片'，'文字' ~~~ ![](https://img.kancloud.cn/64/73/6473f1170b47cdbe61090ef597ca4749_1267x681.jpg) >[danger] ##### 模塊化工具所具備 ~~~ 1.根據上面分析后整個模塊化工具期望具備的雛形 1.1.能夠將散落的模塊打包到一起； 1.2.能夠編譯代碼中的新特性； 1.3.能夠支持不同種類的前端資源模塊。 ~~~ >[danger] ##### 前端模塊化工具 ~~~ 1.webpack - 模塊打包器 2.rollup - ES Modules 打包器 ~~~ * 打包工具關于webpack 官網的介紹可以看出，如果涉及更多的類型文件打包優先選webpack ![](https://img.kancloud.cn/d0/ae/d0ae1d050321cf9b8a6fac2751a46041_734x125.png) >[danger] ##### 我從哪里知道這些知識的 [知識獲取位置](https://kaiwu.lagou.com/course/courseInfo.htm?courseId=88#/detail/pc?id=2262)