webpack學習(一) -- 基礎概念及安裝執行

很早就想學習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打包須要尋找入口文件和出口文件，固然，這些也是咱們人爲可配置的，具體怎麼配置呢？小女暫且休息一下，關注我，且聽下回分解，拜拜~