圖片來自webpack官網logo
1、什么是Webpack？Webpack的概念？Webpack的流程？
1.什么是Webpack？Webpack的定義？概念 | webpack 中文檔案
本質上，webpack 是一個用于現代 JavaScript 應用程式的 靜態模塊打包工具，當 webpack 處理應用程式時，它會在內部從一個或多個入口點構建一個 依賴圖(dependency graph)，然后將你專案中所需的每一個模塊組合成一個或多個 bundles，它們均為靜態資源，用于展示你的內容，
2.Webpack的流程？
WebPack是模塊打包機：
它做的事情是，分析你的專案結構，
找到JavaScript模塊以及其它的一些瀏覽器不能直接運行的拓展語言（Scss，TypeScript等），
并將其打包為合適的格式以供瀏覽器使用，
2、為什要使用Webpack？/簡化開發的方法？
網頁可以看做是功能豐富的應用，由復雜的JavaScript代碼和一大堆依賴包組成，
簡化開發的復雜度方法
a:模塊化，讓我們可以把復雜的程式細化為小的檔案;
b:類似于TypeScript這種在JavaScript基礎上拓展的開發語言：使我們能夠實作目前版本的JavaScript不能直接使用的特性，并且之后還能能裝換為JavaScript檔案使瀏覽器可以識別；
c:scss，less等CSS前處理器
這些方法大大的提高了我們的開發效率，但是利用它們開發的檔案往往需要進行額外的處理才能讓瀏覽器識別,而手動處理又是非常繁瑣的，這就為WebPack類的工具的出現提供了需求，因此要使用webpack，
3.Webpack的安裝及使用？專案檔案環境安裝
首先要安裝Node.js，Node.js自帶了軟體包管理工具npm，可以使用npm安裝各種插件，
win+r輸入cmd打開黑視窗進入根目錄
輸入： md mypack 命令
//創建mypack檔案夾
md mypack 輸入 ： cd mypack 命令
// 進入你的專案目錄 mypack目錄可以隨意自己建立
cd mypack輸入 ：npm init 命令
// 初始化專案檔案夾 會創建一個package.js
npm init 然后除了name，其它無需必填enter即可
Package.json 屬性說明
name- 包名，version- 包的版本號，description- 包的描述，
homepage- 包的官網 url ，author- 包的作者姓名，contributors- 包的其他貢獻者姓名，
dependencies- 依賴包串列，如果依賴包沒有安裝，npm 會自動將依賴包安裝在 node_module 目錄下，
repository- 包代碼存放的地方的型別，可以是 git 或 svn，git 可在 Github 上，
main- main 欄位是一個模塊ID，它是一個指向你程式的主要專案，就是說，如果你包的名字叫 express，然后用戶安裝它，然后require("express")，
keywords- 關鍵字
繼續webpack本地安裝：
1.安裝webpack
npm install --save-dev webpack2.安裝webpack腳手架
npm install --save-dev webpack-cli
對于大多數專案，我們建議本地安裝
經過以上流程，webpack區域安裝已經安裝完畢~
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/396221.html
標籤：其他
下一篇：web學習資料匯總