很早就想學習webpack專案打包相關知識，因為對其不瞭解，在公司做專案，打包出錯總是讓我最頭疼的問題，嗯...作為對webpack一竅不通的我，只能從最基礎的概念學起啦~
概念
- 什麼是前端工程化？
- 答：是根據業務專案的特點，在公司多人協作開發，總是需要一套固定的規範讓開發者彼此的技術選型、程式碼規範、專案的構建釋出都能保持一致,程式碼質量和效率都會因此增加。 ---這是我自己的理解，官方說法如下：
前端工程化是根據業務特點，將前端開發流程規範化，標準化，它包括了開發流程，技術選型，程式碼規範，構
建釋出等，用於提升前端工程師的開發效率和程式碼質量。
複製程式碼- 程式碼釋出上線過程會經歷什麼？
- 答： 程式碼壓縮、語法檢查、圖片合併、圖片壓縮等。
- 前端自動化構建工具都有那些？
- 答： Grunt、Gulp、Fis3(百度的)、Webpack(當前版本為webpack4)
- webpack中支援哪些模組規範？
- commonJs、AMD、ES6中import
巴拉巴拉一大堆漢字，小女寫的有些頭疼，噹噹噹~終於來點實際的啦~
全域性安裝webpack
安裝工具：npm包管理工具
*webpack4對node要求6.1.1以上版本
第一步
- 開啟git命令視窗
第二步
- 輸入安裝命令
//webpack-cli是webpack中命令列介面工具
npm install webpack webpack-cli -g
複製程式碼對比webpack之前版本，webpack-cli是在webpack中，安裝webpack就都安裝下來了，從webpack4之後，webpack-cli被單獨分離出來，所以一次要把兩個都安裝上
*蘿蔔白菜，可有所愛
所以，全域性安裝完畢之後最好進行區域性安裝（在當前資料夾安裝）一下，因為專案不同，對應依賴的webpack版本可能不同，區域性安裝可以避免全域性安裝使用統一的webpack版本出現的問題。
區域性安裝webpack
第一步
- 初始化當前專案
npm init //然後生成一個package.json檔案
複製程式碼- 區域性安裝webpack
//--save-dev是指安裝到當前開發環境下
npm install webpack webpack-cli --save-dev
複製程式碼- 安裝完成
- devDependencie：package.json檔案中多出了devDependencies部分，這裡就包含了我們開發時用到的所有依賴包
- package-lock.json/node_modules：咦？這是我們發現，我們的專案資料夾中又多了package-lock.json和node_modules兩個資料夾，其中 package-lock.json中是每個外掛的版本號和下載路徑，node_modules中是我們安裝webpack時需要的依賴包
執行webpack
第一步
- git視窗執行輸入執行命令
webpack
複製程式碼執行完後，發現，咦？報錯啦，webpack執行不了了，找到error的地方，我們發現是不能找到入口模組'./src'，當然，此時我們專案裡還沒有src，只有node_modules、package-lock.json和package.json三個檔案，為什麼webpack要找src檔案呢？
原因很簡單，webpack作為構建工具，在使用前是需要我們去給它一些配置，告訴他該怎麼構建，如果我們不做這類配置，webpack就會按照自己的意願，執行自己預設的配置，去找當前專案src資料夾中的index.js檔案作為入口檔案啦~反正讓他罷工估計是有點難~
第二步
- 滿足webpack的需求（給專案增加src資料夾，在資料夾中建立index.js檔案），再次執行webpack
咦？這時候我們又有新的發現，專案資料夾中增加了dist資料夾，裡面有main.js檔案，這個就是我們打包輸出的出口資料夾啦~
未完待續...
知道webpack打包需要尋找入口檔案和出口檔案，當然，這些也是我們人為可配置的，具體怎麼配置呢？小女暫且休息一下，關注我，且聽下回分解，拜拜~