本文共 1026 字，大约阅读时间需要 3 分钟。

在使用webpack过程中，打包后发现html中img路径是：

但是在main.css文件中的background-image

.test{
     width: 200px;  height: 200px;  background: url("img/01.jpg") center center no-repeat;}

但是，实际目录确实这样排列的

dist   img      01.jpg   style      main.css   index.html

所以看来，webpack打包出来的图片路径是一致，这样就导致css样式中的背景图片访问不出来了。

webpack.config.js

{
   	test: /\.(jpe?g|png|gif)$/i, //图片文件	use: [	  {
   		loader: 'url-loader',		//include: [path.resolve(__dirname, "../src/static")],		options: {
   		  esModule: false,		  limit: 10240,		  name: 'img/[name].[hash:8].[ext]',		  //outputPath: 'img/', //导出之后的路径		  //publicPath: '../'   //公共的路径		}	  }	]},

上面代码控制的是html中的img路径和css中的背景图片路径，如果想要区分开这两种路径。

mini-css-extract-plugin

既然是在这个插件中转换才将css集中在一起，然后再导出到一个main.css文件中，所以，背景图片的路径也需要在这个插件中的options选项中配置。

{
   	test:/\.less$/,	use:[	{
   		loader:MiniCssExtractPlugin.loader,	    //在这里设置publicPath的路径就是background-img的路径 		options:{
   			publicPath: '../'		}	},	'css-loader','less-loader']	}

例图：

转载地址：https://blog.csdn.net/shenshulong/article/details/104155379 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！