if you use MiniCssExtractPlugin.loader , configure him with a separate publicPath

one way is to take out the main css file, put it in the same directory as html, and introduce index.js such as other css,sass. In the end, it will all go into index.css, that is to say, it is actually a modification, and it does not fundamentally solve the path problem of css files packaged in dist if they are all in the css folder

I have encountered the same problem. I have solved the problem that pictures are referenced in
html and css. Html in the dist root directory and css in the dist/mg directory, the image path generated by using the relative path is the same, but the directory structure of html and css is different, so that one party can not reference the picture. Now the problem is solved by changing the publicPath parameter of output to absolute path.

    output: {
        publicPath: '/',
    }
    
    {
        test: /\.(png|jpg|jpe?g|gif|svg)$/,
        use: 'url-loader?limit=8192&name=[name].[ext]&outputPath=static/img/'
    }

Project address: https://github.com/yanxiaojun.

when I write this, I can distinguish the path of the picture in html and css. After output, css is background: url (.. / images/xx.jpg), html is
in ExtractTextPlugin.extract and publicPath:'../',output, there is no need to add publicPath

        {
            test:/\.css$/,
            use:ExtractTextPlugin.extract({
                fallback:"style-loader",
                use:"css-loader",
                publicPath:'../'
            })
        },
        {
            test:/\.(png|jpg|gif)$/,              
            use:[{
                loader:'url-loader',
                options:{
                    limit:5000,                       
                    name:'images/[name].[ext]'
                }
            }]                
        },