webpack打包圖片到動態文件夾

因爲業務需求，要作好多的靜態頁面，起初爲了提升代碼的兼容性，作了腳手架去開發頁面，提升代碼的兼容行和開發體驗。可是後來項目愈來愈多，維護起來至關費力，就打算把全部頁面合併到一個項目裏，即便這些個靜態頁面沒有關係。個人目錄結構大概是這樣：

static下的文件（圖片、視頻、字體等）一概不作處理直接拷貝，可是這麼作css中背景圖片怎麼打包呢？我使用了file-loader插件。可是開始的配置只能把背景圖片打包到dist文件夾下，我想要的是每一個頁面應用的文件都打包到對應的頁面文件夾裏面，頁面是可增可改的，路徑大概爲：dist/xxx/static/images/img.png.可是file-loader的name是寫死的啊，打包的邏輯裏面怎麼獲取文件夾名字呢？

{ test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, include: [config.srcPath], // 在源文件目錄查詢
                exclude: /node_modules/,    // 忽略第三方的任何代碼
                use: [{ // 圖片文件小於8k時編譯成dataUrl直接嵌入頁面，超過8k回退使用file-loader
                    loader: 'url-loader', options: { limit: 8192, // 8k
                        name: 'images/[name].[hash:7].[ext]', fallback: 'file-loader',  // 當超過8192byte時，會回退使用file-loader
 publicPath: '/' //採用根路徑
 } }] },

後來發現能夠利用file-loader的path和context解決個人問題，修改過的代碼是這樣子：

{ test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, include: [config.srcPath], // 在源文件目錄查詢
                exclude: /node_modules/,    // 忽略第三方的任何代碼
                use: [{ // 圖片文件小於8k時編譯成dataUrl直接嵌入頁面，超過8k回退使用file-loader
                    loader: 'url-loader', options: { limit: 8192, // 8k
                        name: '[path]/[name].[hash:7].[ext]', // 利用[path]路徑獲取文件夾名稱並設置文件名
                        fallback: 'file-loader',  // 當超過8192byte時，會回退使用file-loader
                        context: path.resolve(__dirname, '../src'),//過濾掉[path]的相對路徑
                        publicPath: '/' //採用根路徑
 } }] },

此時的path是相對路徑，它的值應該爲/src/xxx/static/images，咱們利用context：path.resolve(__dirname, '../src')過濾掉了src文件名，那麼path的值就是/xxx/static/images,這樣配置name，圖片就打包到咱們的動態文件夾裏面了。

參考連接：https://blog.csdn.net/qq_36800701/article/details/84872672