webpack packed into a dynamic picture folder

Due to business needs, do a lot of static pages, at first in order to improve the compatibility of the code, do the scaffolding to develop a page, row and improved code-compatible development experience. But then more and more projects, maintenance is very laborious, it is intended to merge all pages into a project, even if these static pages does not matter. My directory structure something like this:

Files (pictures, videos, fonts, etc.) under static copy all without processing them, but doing so in css background image how packed it? I used the file-loader plug-ins. But the configuration can only start the background image to the next package dist folder, I want a file for each page of the application are packed into the corresponding folder inside page, the page can be changed is increased, the path was about: dist /xxx/static/images/img.png. but file-loader's name is written dead, ah, the logic of how to obtain packaged inside the folder names?

{ 
                The Test: /\.(png|jpe?g|gif|svg)(\?.*)?$/ , 
                the include: [config.srcPath],                // query in the source file directory 
                the exclude: / node_modules /,     // ignore any code that third-party 
                use: [{ // image files compiled into less than 8k dataUrl directly into the page, using more than 8k fallback-Loader file 
                    Loader: 'url-Loader' , 
                    Options: { 
                        limit: 8192, // 8k 
                        name: 'Images / [name] [the hash:. 7].. [EXT]' , 
                        fallback: 'file-loader',   // when it exceeds 8192byte, will fallback using the file-loader
                  
                        publicPath: '/' // using root 
                    } 
                }] 
            },

Later found to use file-loader and context of the path to solve my problem, modified code is like this:

{ 
                The Test: /\.(png|jpe?g|gif|svg)(\?.*)?$/ , 
                the include: [config.srcPath],                // query in the source file directory 
                the exclude: / node_modules /,     // ignore any code that third-party 
                use: [{ // image files compiled into less than 8k dataUrl directly into the page, using more than 8k fallback-Loader file 
                    Loader: 'url-Loader' , 
                    Options: { 
                        limit: 8192, // 8k 
                        name: '[path] / [name] [the hash:. 7].. [EXT]', // use [path] Gets the path name and folder name setting file 
                        fallback: 'file-Loader',   //When it exceeds 8192byte, rolls back-Loader using File 
                        context: path.resolve (__ dirname, '../src'), // filter out [path] relative path 
                        publicPath: '/' // using root 
                    } 
                } ] 
            },

At this point the path is a relative path, its value should be / src / xxx / static / images, we use the context: path.resolve (__ dirname, '../src') filtered out src file name, then the value of path is / xxx / static / images, so the configuration name, the picture on the package to our dynamic folders inside.

Reference Links: https://blog.csdn.net/qq_36800701/article/details/84872672