025.前端工程構建

1、前端工程構建過程

• 前端開發框架：vue、react、Angular 等；
• 前端工程構建工具：webpack、Npm Script、gulp、grunt等；
• Js包管理工具：npm（Node Package Manager）

　　　　npm是隨同NodeJS一塊兒安裝的包管理工具（管理js代碼，相似java jar包管理工具maven）

　　　　　　容許用戶從NPM服務器下載別人編寫的第三方包到本地使用。

　　　　　　容許用戶從NPM服務器下載並安裝別人編寫的命令行程序到本地使用。

　　　　　　容許用戶將本身編寫的包或命令行程序上傳到NPM服務器供別人使用

 

1.爲何須要構建：使用框架開發的源代碼沒法直接在服務器運行，必須經過轉換後（構建）才能夠正常運行。

 

2.構建過程：將源代碼轉換成可執行的JavaScript、CSS、HTML代碼；

• 代碼轉換：將TypeScript編譯成JavaScript、將SCSS編譯成CSS等。
• 文件優化：壓縮JavaScript、CSS、HTML代碼，壓縮合並圖片等。
• 代碼分割：提取多個頁面的公共代碼，提取首屏不須要執行部分的代碼讓其異步加載。
• 模塊合併：在採用模塊化的項目裏會有不少個模塊和文件，須要經過構建功能將模塊分類合併成一個文件。
• 自動刷新：監聽本地源代碼的變化，自動從新構建、刷新瀏覽器。
• 代碼校驗：在代碼被提交到倉庫前須要校驗代碼是否符合規範，以及單元測試是否經過。
• 自動發佈：更新代碼後，自動構建出線上發佈代碼（/dist）並傳輸給發佈系統（npm庫）。

 

http://www.javashuo.com/article/p-eqbopsgj-k.html

https://www.sohu.com/a/234032018_231218

 

2、webpack核心概念

1.Webpack專一於構建模塊化項目。

2.在Webpack裏一切文件（JavaScript、CSS、SCSS、圖片、模板等）皆模塊，經過Loader轉換文件，經過Plugin注入鉤子，最後輸出由多個模塊組合成的文件。

• 入口起點(Entry Points)：項目提供一個入口文件，經過這個入口文件執行模塊化。
• 輸出（Output）：chunk多個文件組成的一個代碼塊，例如把一個可執行模塊和它全部依賴的模塊組合和一個 chunk 這體現了webpack的打包機制。
• 加載器(Loaders)：loader 是對應用程序中資源文件進行轉換。它們是（運行在 Node.js 中的）函數，能夠將資源文件做爲參數的來源，而後返回新的資源文件。例如把es6轉換爲es5，scss轉換爲css。
• 插件(Plugins)：插件是 wepback 的支柱功能。在你使用 webpack 配置時，webpack 自身也構建於一樣的插件系統上！插件目的在於解決 loader 沒法實現的其餘事。

 

圖1.webpack構建過程

 

 

3、使用webpack構建前端工程

https://segmentfault.com/a/1190000012789253?utm_source=tag-newest

1.安裝nodejs

2.新建項目目錄 mkdir webpack-demo && cd webpack-demo/

3.初始化項目 （npm解決依賴關係，相似maven項目）

npm init 

 

4.安裝webpack webpack-dev-server  webpack-cli  vue (使用npm安裝）

npm install webpack webpack-dev-server --save-dev npm install webpack-cli --save-dev npm install vue --save-dev

 

 

5.編寫前端代碼

TODO

 

6.在package.json文件中 scripts 配置 使用webpack構建、運行的腳本

"scripts": { "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot", "build": "cross-env NODE_ENV=production webpack --progress --hide-modules" }

 

7.構建、運行

npm run build
npm run dev

 

8.發佈到npm

npm login npm publish

 

 

https://blog.csdn.net/qq_33599109/article/details/79892975

http://www.javashuo.com/article/p-ooiyfamr-bu.html

https://www.jianshu.com/p/71631adeedf8