實際前端開發應遵守：

• 模組化（js的模組化（把可複用的js方法或者功能抽取出來形成一個獨立的js檔案）、css的模組化、資源的模組化）
• 元件化（複用現有的U I結構、樣式、行為）
• 規範化（目錄結構的劃分、編碼規範化、介面規範化、文件規範化、git分支管理）
• 自動化（自動化構建、自動部署、自動化測試）

什麼是前端工程化？

前端工程化是指在企業級的前端專案開發中，把前端開發所需的工具、技術、流程、經驗等進行規範化、標準化。

目前主流的前端工程化解決方案：

• webpack（https://www.webpackjs.com/）
• parcel (http://zh.parceljs.org/)

什麼是webpack？

webpack是前端工程化具體的解決方案。

主要功能：它提供了友好的前端模組化開發支援，以及程式碼壓縮混淆、處理瀏覽器Javascript的相容性、效能優化等強大的功能。提高了前端開發效率和專案的可維護性。

在專案中安裝webpack (npmjs.com)

在終端執行如下的命令，安裝webpack相關的兩個包：

npm install [email protected] [email protected] -D

命令以-D（--save -dev）結尾,這兩個包會被記錄在package.json檔案下的devDependencies中，表示這個包只用於開發生產時使用。

以-S(--save)為字尾的命令表示包會被記錄在package.json檔案下的dependencies中，表示這個包用於開發生產和專案上線後。

webpack的基本使用

1. 在專案根目錄中，建立名為webpack.config.js的webpack配置檔案，並初始化如下的基本配置：

moudle.export={
mode:'development'}
//用來指定構建模式，可選值有development和production。

mode節點的可選值有兩個，分別是：

• development 開發環境，不會對打包生成的檔案進行程式碼壓縮和效能優化；打包速度快，適合在開發階段使用。
• production 生產環境，會對打包生成的檔案進行程式碼壓縮和效能優化；打包速度很慢，僅適合在專案的釋出階段使用。

2.在package.json的scripts節點下，新增dev指令碼如下：

"scripts" :{
"dev": "webpack"  
//script節點下的指令碼，可以通過 npm run執行，例如：npm run dev
}

3.在終端執行 npm run dev 命令，啟動webpack進行專案的打包構建。在目錄中生成了。 一個dist資料夾，裡面有一個mian.js，將這個js檔案引入到html頁面內，便可解決相容性問題。