在前面已經介紹了css檔案可以使用第三方loader去載入。
在乙個專案中，也不僅僅只有html，js和css檔案，還有檔案，字型檔案等等。當我們給乙個css樣式設定背景時：
你會發現，webpack打包的時候會報錯。
報錯：無法處理這種格式的檔案，解決這個問題就需要url-loader和file-loader。
安裝url-loader，cnpm install url-loader file-loader –d
在webpack.config.js中配置第三方loader
這個時候重新啟動專案，你會發現被載入為：
我們會發現，的url位址被預設轉化為了base64格式，如果一張太大的話，這樣的轉換反而降低效率，我們希望在比較小的時候載入為base64,較大則載入原始。
在webpack.config.js中如下配置：
像在url上加引數一樣給url-loader設定乙個limit引數（單位位元組），大於或等於給定的limit值，則不會被轉為base64格式的字串，如果小於給定的limit值，則會被轉為base64字串。
我們可以發現的字尾已經是.png格式了，但是名稱還不是原來的名稱，因為webpack在打包的時候防止名稱重複，自動設定了hash名，如果想要使用原始的名稱作為路徑，則還需要給url-loader增加乙個引數
引數分析：
如果我們在兩個資料夾中分別引入兩個名稱的。如下所示
在html頁面中新建兩個div
在css樣式中，分別引入這兩張
看看webpack打包後的樣式：
我們明明引入了兩張不同的，但是他們卻引入了同一張，因為webpack打包之後，會被存放在 / 目錄下的記憶體中，仔細觀察中的url位址，就會發現跟我們的在css樣式中的引入路徑並不一樣，所以會出現引入同一張的問題。
解決問題：在url-loader中使用原始名稱的時候，新增hash值來區別是不是同一張
webpack 5 開發環境
當 webpack 打包源 時，可能會很難追蹤到 error 錯誤 和 warning 警告 在源 中的原始位置。例如，如果將三個原始檔 a.js,b.js和c.js 打包到乙個 bundle bundle.js 中，而其中乙個原始檔包含乙個錯誤，那麼堆疊跟蹤就會直接指向到bundle.js。你可能...
webpack5配置問題
問題描述 安裝webpack dev server 4.7.4 在package.json的scripts中增加 script 執行起來後只顯示public index.html的模版頁面，js檔案並沒載入進來。檢視了下輸出 content not from webpack is served fr...
Webpack5 常用Plugin（外掛程式）
webpack的外掛程式，可以增強webpack的自動化能力，使用外掛程式，可以完成自動清空目錄 拷貝資源檔案 壓縮輸出 等功能。webpack的乙個個外掛程式，就是在 webpack生命週期的鉤子上掛載的乙個個任務。常用的webpack外掛程式 作用clean webpack plugin 在每次...