一.出現的問題

開始採坑:

百度搜索結果都是說,圖片那檔案沒有在dist啊,HTML載入的檔案路徑錯了啊---------------不是一個問題

新增file-loader---------不好使

研究了一天多.看了N多個網頁之後,

當看到

webpack4.x打包圖片檔案遇到效果不顯示的問題（file-loader載入遇到的狗血問題）(https://blog.csdn.net/IT_CREATE/article/details/106891203)

這篇文章之後,獲得了思路

我看視訊學習的webpack 是3.X版本,所以老師用3,X版本配置是沒問題

當webpack4.x時,圖片打包出現了變化,具體請看上面的連線

我查詢我的webpack版本:5.48.0

我TMD的是5.X版本,我拿著3.X版本的配置去整5.X配置的內容.這不就相當於拿著前朝的劍,斬本朝的官麼

然後我搜索關鍵字變成:webpack5.x

找到了

從零搭建基於 Webpack5.x 的 Vue 專案(https://zhuanlan.zhihu.com/p/339679136)

這篇文章 圖片配置變成了翻天覆地的變化

                 {
                     test: /\.png|jpg|gif|jpeg|svg/,
                   type: 'asset',
                   parser: {
                     dataUrlCondition: {
                           maxSize: 10 * 1024,
                           },
                 },
               generator: {
                     filename: 'images/[base]',
                     },
           },

　　按這個配置進行配置後,執行成功

共耗時16小時解決問題

吐槽一下:webpack中文官網,給的參考手冊一點都不正確,浪費大家時間