webpack打包css文件路径配置

webpack版本： 4.42.1

项目中使用了mini-css-extract-plugin插件进行代码分割。

   {      test: /\.less$/,     
          exclude: /node_moudles/,      
          include: path.resolve(__dirname, './src'),      
          use: [{        
                  loader: MiniCssExtractPlugin.loader,        
                  options: {          
                        publicPath: '../', // 必要          
                        hmr: process.env.NODE_ENV === 'development'        
                  }      
                }, 
                'css-loader?modules', 
                {        
                  loader: 'less-loader',        
                  options: {          
                       javascriptEnabled: true       
                  }      
          }]    
    }

只配置publicPath的话，打包后的文件是没有任何反应的。

如果想要将所有的css文件打包进一个css文件夹中，需要如下配置：

  plugins: [    
    ...    
    new MiniCssExtractPlugin({      
         filename: 'css/[name].css',      
         chunkFilename: 'css/[id].css'   
    })  
  ]

其实，如果在css文件中没有引入图片等文件时，只在插件中配置即可。

但是如果只进行插件的配置，则对于css中引用背景图片的情况：

  background-image: url('../../images/shaixuan_bg@2x.png');

图片的loader配置如下：

   {      
       test: /\.(gif|jpg|jpeg|png|svg)$/,      
       exclude: /node_module/,      
       include: path.resolve(__dirname, './src/images'),      
       use: {        
             loader: 'url-loader',        
             options: {          
                  limit: 0, // 低于10K的图片转为Base64编码          
                  name: '[name].[contenthash:8].[ext]',          
                  outputPath: 'images'        
             }      
        }    
    }
 

此时如果MiniCssExtractPlugin.loader未进行publicPath的设置，会出现最终路径成为

XXXXX/css/images/***.png