首先安裝好node後使用npm安裝webpack
使用cmd檢視node安裝是佛成功 指令：node -v；
npm install -g nrm 下載下傳全局的nrm 指令：nrm ls檢視
nrm是一個管理npm的工具 可以管理npmnpm源位址
nrm 提供幾個常用的下載下傳包的url位址 并且能支啊幾個位址中友善進行切換 切換指令 如nrm ues taobao(要切換的位址)
如下吧npm源位址切換到淘寶npm源位址（npm源位址是國外，建議切換到國内的淘寶，npm下載下傳包時會更快捷）
全局安裝npm install webpack -g 本地安裝是npm install webpack -D
1:：建立一個檔案項目結構
Dist是要釋出的檔案 Src是開發中建立的代碼 Main.js是項目的js入口檔案
2：引入jq
npm install -y
出現packge.json檔案
Npm install jquery -S 安裝jq後出現node_module檔案夾
如上引入會出現這樣的錯誤
應該建立一個main.js檔案 用來作為一個項目要引用js檔案的入口
使用webpack進行處理 把es6文法進行處理
把main,js（入口檔案）用webpack處理後方到dist裡（檔案打包方法一） webpack src/main.js /dist/bundist.js
成功後會生成一個檔案 檔案名就是dist裡面的bundist.js（出口檔案） bundist.js是一個壓縮的js檔案 在正式版中使用這個檔案
在indes檔案引入bundist.js檔案就不會在報文法錯誤了
Webpack能處理js檔案的互相依賴關系并且能夠處理js的相容性 把進階的浏覽器不能識别的文法轉為低級的浏覽器識别的文法。
建立以一個webpack.config.js檔案（檔案打包方法二）
然後運作webpack進行打包
直接運作webpack就可打包js檔案
修改main檔案在直接執行webpack即可打包編譯main到bunle.js
4：Webpack與plugin配置
使用webpack-dev-server實作自動打包編譯功能
運作npm install web-dev-server -D 安裝到項目本地（也要全局安裝一次npm installweb-dev-server -g全局安裝）
在檔案中配置一個dev（可随意命名）當自動打包時總要運作dev即可不需要運作一個webpack-dev-server
webpack-dev-server依賴與webpack是以要安裝webpack
（如果運作npm run dev後出現了一個報錯 是因為安裝node-module檔案時終止了他 要解決那個錯誤可以删除node-module檔案然後在重新安裝一遍npmi就行 ；）
安裝webpack Npm install webpack -D本地安裝 npm install webpack -g 全局安裝
運作npm run dev
當main.js做出修改後編輯器會自動編譯 實時監聽代碼的改變 把html裡面的路徑修改下 修改為打包後的js引用js檔案
改為在根路徑下的位址 因為webpack-dev-server把main檔案編譯後會放到根路徑下
webpack-dev-server常用的指令
--open 編譯後自動打開浏覽器
--port 3000 指定端口号 如指定端口号為3000等
--contenBast src 指定進入後的根路徑 如指定進入網站後直接進入src裡，展示src的index,html頁面 而不是一個檔案展示頁面
--hot 熱重載 是直接把修改的地方做一個更新檔 不必把這個檔案都重新編譯一邊，隻編譯修改的那個地方 可以實作浏覽器的無重新整理加載相當于異步重新整理減少不必要的請求
webpack-dev-server的配置指令
報錯
因為啟用熱更新還需要在操作第二步 在頂部加上webpack
第三步 （建議不使用這個方式 開發中使用前面一種比較好 了解下）
Html-webpack-plugin配置啟動頁面
把index頁面也放到記憶體中去就像bundle.js檔案一樣 運作 npm install html-webpack-plugin -D安裝插件到開發依賴并且修改webpack.config.js檔案
1
：webpack.config.js檔案導入插件
2：指定頁面去生成一個頁面
運作npm run dev執行會生成一個index
插件的作用：自動在頁面中生成一個指定的頁面會自動把我們打包的檔案追加到記憶體中的那個頁面中不需要手動加入，如上圖所示
Webpack與loader配置和使
處理css檔案 在main.js檔案
在沒有安裝loader運作npm run dev會出現這樣的錯誤
Webpack預設隻能處理js問價 不能處理css檔案 如果要處理一些非js檔案必須要安裝合适的第三方loader加載器
1 處理css檔案 需要裝兩個第三方加載器
Npm install style-loader css-loader -D
2 webpack.config.js檔案 新增加一個配置節點
再次運作 npm run dev就會編譯成功
webpack處理第三方檔案的過程：
1：發現這要處理的檔案不是js檔案，然後去配置檔案中，查找有沒有對應的第三方loader規則
2：如果找到對應規則，就會調用對應的loader處理檔案類型
3：在調用loader的時候，是從後往前調用的
4：當最後一個loader調用完畢，會把處理結果直接交給webpack進行打包合并，最終輸出到打包的bundle.js檔案中去。
Loader配置處理less檔案配置
在main.js裡面寫入
報錯
安裝npm install less-loader -D 和npm install less -D安裝依賴
在webpack.config.js檔案裡面加上
在運作npm run dev可以把less問價打包編譯
Loader配置處理sass檔案配置
在main.js裡面寫入sass檔案
報錯
安裝npm install sass-loader -D 和npm install node-sass -D安裝依賴
使用npm安裝sass一般安裝不下來 需要cnpm去安裝 cnpm i node-sass -D
在webpack.config.js檔案裡面加上
在運作npm run dev可以把less問價打包編譯
Webpack中的url-loader的使用
直接引入img檔案
會直接報錯，檔案路徑不對
預設情況下webpack無法處理圖檔和字型庫 隻要是url位址都無法處理會報錯
Npm i url-loader file-loader -D 安裝兩個加載器
解決方法在webpack.config.js中添加一個規則
重新運作npm run dev正常編譯
圖檔路徑是一個base64編碼格式 減少圖檔請求
圖檔不能重名 即使是圖檔在不同的檔案夾 當webpack編譯後會強制把圖檔重命名，因為webpack編譯後他們都是放在根目錄下的，頁面引用的路徑變成一樣的。
不過圖檔名稱會改變成一個字元串 主要是為了防止圖檔的重名
也可以設定一個參數，接收檔案名，那麼引入的圖檔名稱就是圖檔本身的命名
圖檔不能重名 即使是圖檔在不同的檔案夾 當webpack編譯後會強制把圖檔重命名，因為webpack編譯後他們都是放在根目錄下的，頁面引用的路徑變成一樣的。
在名稱的前面放一個hash值，即使是一樣的圖檔名稱在編譯後也會加上一個不一樣的hash值 以區分兩個同名的圖檔，後面的數值是把32位的hash值截取前面8位上去。
Webpack使用url-loader處理字型檔案
原始方法在html檔案添加字型檔案 ：（不推薦使用）
在js頁面使用import引入檔案
兩種都會報錯報錯：
路徑是沒有錯誤的 還是要在webpack.config.js添加一個配置
在執行npm run dev就能正常編譯了
Webpack和npm中的幾個問題的說明
錯誤1 json轉化失敗
原因是json不能寫注釋 要把這一段去掉
錯誤2：（已經安裝的話就是環境變量問題，如果沒有安裝的話要重新安裝）
下圖表示的意思是以前安裝過留下的記錄 要去node-module檢視才能确認安裝沒有：
錯誤3：當網速慢時安裝包很慢 卡主後 停止安裝在重新安裝一遍 但是在運作項目後又是各種報錯 各種缺少各種各樣的包，因為裡面的包已經破壞了 最好是全部node_module删除 在重新安裝
Webpack中的babel配置
靜态屬性是可以通過類名通路的屬性
執行個體屬性是隻能通過類的執行個體通路的屬性
報錯
在webpack中，預設隻能處理一部分的es6文法，一些更加進階的es6文法或者es7文法，webpack處理不了，這時候就需要第三方的loader來幫助webpack處理這些進階的文法，當第三方loader吧進階文法轉化為低級文法之後會直接把結果打包到bundle.js中
通過baber可以把進階文法轉換為低級文法
要安裝兩套包 去安裝baber依賴相關
1：npm install baber-core baber-loader baber-plugin-transform-runtime -D
2：npm install baber-preset-env baber-preset-stage-0 -D
打開webpack.config.js增加新的比對規則
在根目錄建立一個.babelrc的babel的配置檔案
運作npm run dev