webpack安裝，常見問題和基本插件使用

 一：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：配置文件

module.exports導出模塊中new一個熱更新模塊

 

八：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的配置

使用static關鍵字，能夠定義靜態屬性，所謂的靜態屬性，就是能夠直接經過類型直接訪問的屬性；實例屬性是隻能經過類的實例來訪問的屬性

執行上面代碼會報錯，沒法識別：

解決分析：在webpack中，默認只能處理一部分ES6新語法，一些更高級的ES6語法或ES7語法，webpack是處理不了的，這時候就須要藉助第三方的loader來幫助webpack處理這些高級語法， 當第三方loader把高級語法轉換成低級語法以後，會把結果交給webpack打包到bundle.js

經過Babel，能夠幫咱們將高級的語法轉化爲低級的語法

1：在webpack中，能夠運行以下兩套命令，安裝兩套包，去安裝Babel相關的loader功能

1.1：npm install babel-core babel-loader babel-plugin-transform-runtime -d

1.2：npm install babel-preset-env babel-preset-stage-0 -d

2：打開webpack配置文件，在module節點下的rules數組中，添加一個新的匹配規則：

2.1{test:/\.js$/,use:'babel-loader',exclude:/node_modules}

2.2注意：在配置規則時候必須把node_modules經過exclude選項排除掉，緣由有兩：

2.2.1若是不排除node_modules,則babel會把node_modules中全部的第三方js文件都打包編譯，這樣，會消耗CPU，同時，打包很是慢

2.2.2哪怕最終Babel中全部node_modules轉換完畢了，可是項目也沒法正常進行

3：在項目的根目錄中，新建一個叫作.babelrc配製的時候必須符合JSON語法規範，不能寫註釋，字符串必須用雙引號，

3.1在babelrc寫以下配置，你們能夠把preset翻譯成【語法】的意思

{

"presets":["env","stage-0"],

"plugins":["transform-runtime"]

}

4瞭解：目前安裝的babel-preset-env是最新的ES6語法，以前安裝babael-preset-es2015

注意：因爲版本更新問題，以上操做可能會報錯，參考以下：

實在不行，就全卸載從新按

最後把babel-preset-stage-0 卸載，而後修改.babelrc文件

注意：最終本人本例解決方案以下：

問題：

解決：先卸載再裝低版本

問題：

解決：

十六：webpack中使用vue文件

安裝vue

默認webpack沒法打包vue文件，須要安裝相關的loader

在配置文件中，新增配置項

render渲染組件

 總結：

 

謝謝路過