【已解决】webpack css分离后图片路径不对应的问题

开局先填个几年前的坑。。。

PS：⚠️ Since webpack v4 the extract-text-webpack-plugin should not be used for css. Use mini-css-extract-plugin instead.

css分离使用 extract-text-webpack-plugin 已经不行了，请 @next 或改用 mini-css-extract-plugin

cnpm i --save-dev extract-text-webpack-plugin@next

cnpm i --save-dev mini-css-extract-plugin

mini-css-extract-plugin - npm

言归正传

url-loader处增加两个选项publicPath和outputPath，共同指向同一目录

{
   test:/\.(png|jpg|gif)/ ,
   use:[{
       loader:'url-loader',
       options:{
           limit:5000,
		   publicPath:"../static/",	//图片前所在目录路径
		   outputPath:"/static",	//图片输出路径
       }
   }]
}

配置完成后，再使用webpack命令进行打包，css分离后路径不对应的问题解决！

PS：publicPath的设置会对html-withimg-loader产生一定干扰