一：webpack認識
本質上，webpack 是一個現代 JavaScript 應用程序的靜態模塊打包器(module bundler)。當 webpack 處理應用程序時，它會遞歸地構建一個依賴關系圖(dependency graph)，其中包含應用程序需要的每個模塊，然后將所有這些模塊打包成一個或多個 bundle。
二：webpack安裝
安裝准備：
1：安裝node最新版本
2：安裝npm
成功安裝后可cmd查看,可以查看版本號則成功了第一步
全局安裝：
cmd安裝
這樣安裝一般都是最新版本 webpack 4+ 版本，你還需要安裝 CLI
安裝成功后cmd查看版本號
注意：全局安裝只要電腦不發生問題，就無需多次安裝，但是官方不推薦全局安裝 webpack。這會將你項目中的 webpack 鎖定到指定版本，並且在使用不同的 webpack 版本的項目中，可能會導致構建失敗。
本地安裝：
要安裝最新版本或特定版本，請運行以下命令之一：
如果你使用 webpack 4+ 版本，你依然還需要安裝 CLI
對於大多數項目，我們建議本地安裝。這可以使我們在引入破壞式變更(breaking change)的依賴時，更容易分別升級項目。通常，webpack 通過運行一個或多個 npm scripts，會在本地 node_modules 目錄中查找安裝的 webpack：
當你在本地安裝 webpack 后，你能夠從 node_modules/.bin/webpack 訪問它的 bin 版本。
三：安裝出現問題
1：配置警告：“模式”選項尚未設置，webpack將返回“生產”獲取此值。將“mode”選項設置為“development”或“.”，以便為每個環境啟用默認值。
解決方法：在package.json中配置下;
然后運行轉換命令行=時后加上 --mode development
2：明明已經安裝，卻找不到webpack模塊
解決方法：一般是路徑錯誤，查看路徑是否正確，反斜杠是否正確，還有本例中是webpack路徑錯誤，應該是
3：文件代碼引用模塊找不到
解決方法：因為沒有安裝對應包，需要安裝一下：
成功后在package.json中可以查看依賴包
4：在安裝時可能會報錯不存在webpack一些問題，安裝之前需要初始化：
初始化完成后項目中將存在json文件和node_modules:
5：如果全局安裝，現在又想本地安裝，需先刪除全局：
6：NPM錯誤！在1:257的基准下沒有找到任何值
解決方法：
1.卸載本地node
2.刪除本地 ../AppData/Roaming/npm ../AppData/Roming/npm-cache 這兩個文件夾
windows命令path查看你的位置在哪里 我本地位置：C:\Users\***\AppData\Roaming\npm C:\Users\***\AppData\Roaming\npm-cache
3.重新下載安裝node
官網地址：https://nodejs.org/en/
4.檢查node安裝是否成功
>node -v --查看node版本
>npm -v --查看npm版本
>npm install webpack -g --安裝webpack
>webpack -h --查看webpack版本
如果以上命令執行都ok，那么恭喜你，環境已經安裝好了。
四：webpack可以做什么呢
1：webpack可以處理js間的相互依賴關系
2：webpack能處理js的兼容問題，把高級的瀏覽器不識別的語法轉為低級的能正常識別的語法
五：配置文件webpack.config.js
配置打包文件出口入口
命令行直接運行命令打包
注意：可能會出現錯誤：
解決方法：命令行打包時既沒有給出口入口文件，也沒有配置文件進行配置出入口
過程分析：當我們在控制台直接輸入webpack命令執行的時候，webpack做了以下幾步：
1：首先webpack發現，我們並沒有通過命令的形式，給它指定入口和出口
2：webpack就會去項目的根目錄中區查找一個叫做webpack.config.js的配置文件
3：當找到這個配置文件后，webpack會執行並解析這個配置文件，會得到配置文件中導出的配置對象
4：當webpack拿到配置對象后，就拿到了配置對象中指定的入口和出口，然后進行打包構建
六：使用webpack-dev-server工具，實現自動打包編譯功能
簡介：是一個小型node.js express服務器，新建一個開發服務器，可以serve我們pack以后的代碼，並且當代碼更新的時候自動刷新瀏覽器，啟動webpack-dev-server后，你在目標文件夾中是看不到編譯后的文件的，實時編譯后的文件都保存到了內存當中。
本地安裝：
注意：安裝完后直接執行命令會報錯
分析：項目中是本地安裝的webpack-dev-server ,所以無法把它當做腳本命令，在powersell終端中直接運行（只有那些安裝到全局的命令 -g,才能在終端中正常運行）
解決：package.json中配置命令
終端中運行命令：
然后修改代碼保存后就直接更新打包了，成功后會生成下面配置路徑
注意：webpack-dev-server幫我們打包生成的bundle.js文件，並沒有存放到實際的物理磁盤中，而是直接托管到電腦的內存中，所以，我們在項目目錄中看不到它，但是可以認為和dist,src,node_modules平級有一個看不見的文件bundle.js(避免對此修改保存文件，實時更新打包消耗磁盤)
這個時候項目中引用的bundle.js和打包中引用的bundle.js不是一個文件了，所以這個時候
項目中引用bundle需要改成：
訪問文件需要：
另外需要注意的幾個問題：
1：node_modules包有問題
解決方法：刪除node_modules包，重新安裝
2：所有包裝完后，webpack-dev-server想正常運行，全局安裝過了也不行，在本地項目中必須安裝webpack
解決方法：項目本地重新安裝webpack包
七：webpack-dev-server常用命令參數
1：修改后自動打開瀏覽器
2：修改后自動打開瀏覽器並設置訪問端口號為3000
3：修改后自動打開瀏覽器並設置訪問端口號為3000，並設置打開文件路徑是http://localhost:8080/src/
4：修改后自動打開瀏覽器並設置訪問端口號為3000，並設置打開文件路徑是http://localhost:8080/src/，而且瀏覽器頁面無刷新更新
注意：以上四個參數可以在webpack.config.js中配置，供了解
錯誤記錄：配置對象不存在，本例原因是devServer單詞錯誤，S應該大寫
注意：webpack.config.js配置后瀏覽器會報錯，禁用熱模塊替換
解決方法：
1：檢查devServer配置hot是否開啟
2：檢查是否安裝webpack並在配置文件中導入
2：配置文件
八：html-webpack-plugin插件使用
簡介：
插件的基本作用就是生成html文件。原理很簡單：將 webpack中`entry`配置的相關入口chunk 和 `extract-text-webpack-plugin`抽取的css樣式 插入到該插件提供的`template`或者`templateContent`配置項指定的內容基礎上生成一個html文件，具體插入方式是將樣式`link`插入到`head`元素中，`script`插入到`head`或者`body`中。
安裝：
作用：
1：自動在內存中根據指定頁面生成一個內存頁面
2：自動把打包好的bundle.js追加到頁面中
九：loader配置處理css樣式表
簡介：
webpack 最出色的功能之一就是，除了 JavaScript，還可以通過 loader 引入任何其他類型的文件。也就是說，以上列出的那些 JavaScript 的優點（例如顯式依賴），同樣可以用來構建網站或 web 應用程序中的所有非 JavaScript 內容。
直接引入會報錯：
注意：webpack默認只能打包處理JS類型文件，無法處理其他非JS類型的文件，如果要出路非JS類型的文件，我們需要安裝第三方loader加載器
1：安裝兩個loader加載器：
2：安裝后打開webpack.config.js這個配置文件，在里面新增一個配置節點，叫做module，他是一個對象，在這個modules對象上，有一個rules屬性，這個rules屬性是個數組，存放了所有的第三方文件的匹配和處理規則
3：css文件中寫css樣式
4：入口文件main.js引入css文件
注意：webpack處理第三方類型文件的過程
1：發現這個要處理的文件不是JS文件，然后就去配置文件中，查找有沒有對應的第三方loader規則
2：如果能找到對應的規則，就會調用對應的loader處理這種文件類型
3：在調用loader時候是從后往前調用的
4：當最后一個loader處理完畢，會將處理的結果直接交給webpack進行打包合並，最終輸出到bundle.js中去
十：loader配置處理less文件
less簡介：
Less 是一門 CSS 預處理語言，它擴展了 CSS 語言，增加了變量、Mixin、函數等特性，使 CSS 更易維護和擴展。Less 可以運行在 Node 或瀏覽器端。
直接引入文件會報錯：
解決方法：
1：安裝less-loader
2：less-loader運行需要依賴內部ess，所以需要安裝less
3：配置處理規則
4：入口文件main.js引入less文件
十一：loader配置處理sass文件
sass簡介：
sass是一種對css的一種提升，可以通過編譯生成瀏覽器能識別的css文件。sass技術的文件的后綴名有兩種形式：.sass和.scss。這兩種的區別在於.sass文件對代碼的排版有着非常嚴格的要求，而且沒有大括號，沒有分號。
問題：同上直接引用會報錯，需要安裝loader
解決方法：
1：安裝sass-loader
2：安裝node-sass
3：配置處理規則
4：引入使用
十二：url-loader的使用
默認情況下webpack無法處理css文件中的url地址，無論是圖片還是字體庫，只要是url地址都處理不了
引入url路徑，會報錯：
解決方法：
1：安裝url-loader
2：webpack.config.js中配置匹配規則
3：會有新問題出現，路徑會自動轉義成字節編碼格式
解決方法：給loader傳參數，？傳參limit給定的值是圖片的大小，單位是byte，如果引用的圖片大於或等於給定的limit值，則不會轉成base64格式的字符串，如果圖片小於給定的limit值，則會被轉為base64格式
查看文件字節大小，右擊查看屬性：
webpack為了避免圖片名重復，生成的是hash值，不是源代碼路徑
如果想生成的是源代碼自己寫的路徑名，解決方法，再添加一個name的參數，讓name等於原來的name：
以上有個問題，會由於不是很識別圖片路徑以前的目錄，容易造成一個頁面不同目錄下的相同圖片名稱引用覆蓋現象，
解決方法，limit參數name前加一個hash值，比如=[hash:8]-[name]... 表示在name前加一個取32位hash值前8位的值
十三：url-loader的處理文字文件
案例分析，比如引用bootstrap中字體樣式：
1：main.js入口文件引入bootstrapt.css，不寫node_modules，默認去node_modules去找
2：webpack.config.js中定義匹配規則
3：使用出效果
十四：webpack會碰到的問題
1：命令報錯
解決方法：檢查是否有node_modules或者其中是否有這個包，沒有node_modules重新安裝
注意：查看webpack.json文件依賴記錄是不可靠的，這只是曾經安裝的一個記錄，並不代表記錄存在包就永遠存在
2：報錯在json文件中存在unpected tock，不期待的標記
解決方法：檢查是否有注釋符號或多余符號
注意：JSON文件中不允許寫注釋
十五：webpack中babel的配置
執行上面代碼會報錯，無法識別：
解決分析：在webpack中，默認只能處理一部分ES6新語法，一些更高級的ES6語法或ES7語法，webpack是處理不了的，這時候就需要借助第三方的loader來幫助webpack處理這些高級語法， 當第三方loader把高級語法轉換成低級語法之后，會把結果交給webpack打包到bundle.js
實在不行，就全卸載重新按
最后把babel-preset-stage-0 卸載，然后修改.babelrc文件
注意：最終本人本例解決方案如下：
問題：
解決：先卸載再裝低版本
問題：
解決：
十六：webpack中使用vue文件
安裝vue
默認webpack無法打包vue文件，需要安裝相關的loader
在配置文件中，新增配置項
render渲染組件
總結：
謝謝路過