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