摘要：webpack5快速入門，船新版本，建議收藏
本文分享自華為雲社群《webpack5快速入門，船新版本，建議收藏》，作者：北極光之夜。。
打包: 将不同類型資源按子產品處理進行打包。
靜态: 打包後最終産出靜态資源。
子產品: webpack 支援不同規範的子產品化開發
終端輸入： npm install webpack -g
utiles.js：
index.js：
終端輸入：webpack
webpack會自動尋找src目錄，然後尋找index.js入口檔案，然後進行打包，最終生成一個dist目錄為打包後内容。
index.html引入：
結果：
可以在配置檔案裡定義配置,表示你想如何打包,能設定很多條件。webpack會根據你配置檔案的配置規則來進行打包。在src同級目錄下建立一個webpack.config.js檔案，裡面寫配置資訊。
如最基本的入口和出口：
終端輸入webpack後成功打包了build.js檔案，跟上面打包的main.js内容一樣：
為什麼使用loader：
webpack 隻能了解 javascript 和 json 檔案，這是 webpack 開箱可用的自帶能力。loader 能讓 webpack 能夠去處理其他類型的檔案（比如css類型檔案，圖檔類型，txt類型等等），并将它們轉換為有效子產品，以供使用。
比如，我想webpack能打包css，終端輸入以下指令先安裝css-loader：
1.可以在導入css檔案的時候指定loader，這樣就不報錯了，在導入css檔案路徑前添加css-loader！：
2.當然，也可以在配置檔案設定：
test 屬性，定義一個正規表達式，比對需要處理的檔案類型。識别出哪些檔案會被轉換。
use 屬性，定義出在進行轉換時，應該使用哪個 loader。
配置檔案裡配置後，别忘了在index入口檔案導入css檔案。
上面css-loader隻是能識别css檔案，而引入了style-loader後css樣式才能在頁面展示。
安裝：
配置檔案規則：
因為 webpack 是 從 後 往 前 執 行 ，是以style-loader寫在css-loader前面。
比如，我想 webpack 能打包scss檔案類型。不會sass的可以看這篇文章文章sass全解析。
安裝sass：
轉換scss為css（注意在scss同級路徑下轉換，也是終端輸入）：
在入口檔案index.js導入：
安裝sass-loader：
配置規則：
打包：
webpack 支援所有符合 es5 标準 的浏覽器（不支援 ie8 及以下版本）。如果你想要支援舊版本浏覽器，那就需要借助到一些工具了。在安裝webpack時預設安裝了browserslist，它可以知道各個浏覽器的占有率資料并配置。
這個網站也可以查到目前各個浏覽器的占有率資料。
後面再詳細講。
postcss是javascript轉換樣式的工具，這個工具能處理css相容問題。就是這個工具能給我們寫的css代碼添加一些相容的字首。
首先，你可以通過 這個網站 了解css是添加什麼字首怎麼能相容主流浏覽器的。
配置檔案：
在css檔案類型裡添加postcss-loader，并配置參數 ：
在index.js同級下建立一個名為.browserslistrc 檔案，裡面寫相容的條件，如：
然後終端輸入webpack打包後css代碼會自動添加相容代碼。
上面隻是添加字首，如果還需要更強的相容需要 postcss-preset-env，安裝：
添加配置（來次全的）：
可以隻保留postcss-preset-env，簡寫：
不過一般是在index.js同級下建立一個postcss.config.js檔案專門寫配置：
postcss.config.js檔案内容：
然後在webpack.config.js配置檔案裡直接導入postcss-loader就行：
importloaders：用于配置「css-loader 作用于@import 的資源之前」有多少個 loader。直白來說就是importloaders設定幾，那麼通過@import 導入的css檔案也會向前執行前面不再執行的loader。
如下：
本來一個css檔案會執行上面3個loader，如果那個css檔案存在通過import文法導入的css檔案，那麼那個導入的css檔案是不會執行最後的postcss-loader。但是我想執行，是以配置importloaders，表示import導入的css檔案也會向後執行多少個loader。（注意webpack是從後往前執行的）
file-loader作用：
1.當我們把圖檔當一個子產品導入的時候可以識别它。
2.可以把二進制資源拷貝一份到指定目錄，沒指定就是預設dist目錄。
可以在src目錄下建立一個img檔案夾存放圖檔。
配置檔案（在rules數組裡繼續新增一個規則）：
1. 第一種用法：
當把圖檔當成一個子產品導入時在末尾添加.default，比如：
2. 第二種用法：
如果不想子產品導入時在末尾添加.default，那麼在配置檔案裡添加參數esmodule：
3. 第三種用法：
如果你也不想上面這樣寫，還可以通過es6子產品導入方式：
先導入圖檔子產品：
然後再：
最後終端webpack打包就行，目前會将圖檔預設打包到dist目錄。
跟上面src差別就是要修改的是css類型檔案規則，加一個esmodule參數：
然後在css裡通過url正常引用即可，webpack打包後會将圖檔預設打包到dist目錄：
預設位置，如（圖檔名稱自動根據内容算法得出）：
我們可以設定打包後的圖檔存放到的地方與名稱。
修改配置檔案的圖檔規則，添加一個name配置（名稱）屬性和outputpath屬性（位置）：
其中name屬性裡表示：【ext】擴充名，【name】檔案名，【hash】檔案内容。
outputpath屬性：直接指定img目錄，預設會放在dist目錄下。
兩個屬性可以合并直接簡寫為：
url-loader可以将圖檔轉為base64字元串，能更快的加載圖檔（适用圖檔檔案較少情況，過大的話還是用file-loader）。file-loader相對于拷貝，速度較慢。
配置其實跟file-loader差不多的，把loader那一改就行：
與file-loader不同的是，打包後圖檔會以base64字元串形式加載到代碼裡，是以目錄裡不再可見：
關鍵的是，其實 url-loader 包含 file-loader ，可以設定一個 limit 屬性，當圖檔大小超過limit，url-loader會自認不行，會主動去調用file-loader去執行。
如下：設定一個筏值20kb，小于它會執行url-loader，大于它會執行file-loader
webpack5之後可以直接使用asset處理圖檔，不必再配置file-loader或url-loader。能更好的簡化使用。且它是webpack5内置子產品，不必額外進行安裝其它東西。
配置檔案修改圖檔規則：
1. 預設情況，拷貝圖檔，預設放到dist目錄下（跟file-loader沒配置名稱和路徑時結果一樣）：
2. 指定圖檔打包後位置，放到dist下的img檔案夾裡，圖檔規則跟上面一樣，要修改的是output打包出口路徑那裡，新增assetmodulefilename：
3. 上面相當于全局配置，不論什麼圖檔都會執行，是以不大好，是以還是在規則裡面加圖檔輸出位置與名稱好點，新增generator，裡面的filename寫位置與名稱：
4. 如果想将圖檔轉為base64字元串，而不是拷貝的話，修改規則如下：
5. 當然，也能像url-loader設定limit那樣設定一個閥值，超過後還是用拷貝，修改規則如下，maxsize設定大小，這裡閥值為30kb大小：
新增如下規則：
衆所周知，插件能幫助我們更友善的做更多的事情。
每次我們重新webpack打包的時候還要把上次打包的dist目錄删除掉，麻煩，是以這裡下載下傳一個dist目錄自動清空插件。以後打包會預設把上次打包内容清空後打包。
安裝clean-webpack-plugin插件：
設定配置檔案的配置項plugins：
每個插件都是一個類，直接new就行，可以檢視對應插件的官網，了解傳的參數對應什麼功能。
能幫我們打包後在打包目錄裡生成一個html檔案模闆，并引用入口檔案。
安裝html-webpack-plugin插件：
webpack打包後：
html預設内容：
對于html很多地方可以設定的，比如title的内容啥的，在配置檔案new的時候傳遞對應參數就行（具體參考該插件官網）：
打包後生成的html檔案内容：
當然，可以自己提供一個html模闆，以我提供的模闆為基礎生成新的html模闆：
1. 在src同級下建立一個public目錄，在裡面建立一個index.html檔案作為模闆：
2. 比如index.html内容如下：
<%= htmlwebpackplugin.options.title %>表示使用配置裡的title。
3. 新增template參數，值為模闆路徑：
4. 打包結果：
能處理js相容問題，比如相容es6文法。
在index.js同級下建立一個babel.config.js檔案專門寫配置：
babel.config.js檔案内容：
然後在webpack.config.js配置檔案裡新增規則：
跟在前面說到的postcss-loader一樣，同樣在.browserslistrc 檔案裡面寫相容的條件，如：
0.1%
last 2 version
not dead
最後webpack打包就行了。
babel-loader處理的js相容還不夠多，隻能處理簡單的，若存在promise這些新文法也不大行。是以需要polyfill。
修改babel.config.js：
可以實作你修改源碼後，打包後的代碼也自動更新，不用每次都手動打包去更新。
1. 不使用webpack-dev-serve之前，可以在配置檔案添加watch屬性為true也能實作自動更新，但是性能不太好，不能局部更新，是一有更新就全都更新：
如：
2. webpack-dev-serve性能較好，能實作局部更新，節省性能。
在終端先安裝：
以後打包指令改為：
作用：一個子產品發生變化，隻會重新打包這一個子產品（而不是打包所有子產品），極大的提升建構速度。
先配置：
然後在入口檔案處通過判斷給需要熱更新的子產品熱更新：
output有一個publicpath屬性，為項目中引用css，js，img 等資源時候的一個基礎路徑。其輸出解析檔案的目錄，指定資源檔案引用的目錄，打包後浏覽器通路服務時的 url 路徑中通用的一部分。
通過webpack設定代了解決浏覽器跨域問題。在 devserver 下添加一個 proxy 屬性：
此時，如果我們原本想請求的服務端位址為 https://… /user 就可以替換成 /api/user , 然後把/api重寫為空，那麼實際上就是相當于寫了 https://… /user， 如：
提供mode 配置選項，告知 webpack 使用相應模式的一些内置優化。如果沒有設定，webpack 會給 mode 的預設值設定為 production。
1.安裝：
2.添加規則：
3.導入插件并使用：
未完結，持續更新中……
點選關注，第一時間了解華為雲新鮮技術~