webpack使用mini-css-extract-plugin过程中踩的一些坑

在使用webpack的mini-css-extract-plugin插件时，打包css后样式表里引用文件的路径都有问题，按照网上的教程，大部分都是说修改publicPath
就结论来说，确实只需要将publicPath改为: "../"即可

但是，需要注意的是，当file-loader或者url-loader配置了publicPath时，mini-css-extract-plugin.loader中的publicPath将不再生效

所以最终应该这样配置

{
     
    test: /\.less$/,
     use: [
         {
     
             loader: MiniCssExtractPlugin.loader,
             options: {
     
                 esModule: false,
                 publicPath: "../",
                 hmr: devMode
             }
         },
         "css-loader", 
         {
     
             loader: "postcss-loader",
             options: {
     
                 ident: "postcss",
                 plugins: [
                     require("postcss-preset-env")()
                 ]
             }
         }, 
         "less-loader", 
     ]
},
{
     
	test: /\.(jpg|bmp|png|jpeg|gif|tiff)$/,
	loader: "url-loader",
	options: {
     
	    limit: 64 * 1024,
	    outputPath: "img",
	    name: devMode ? "[name].[ext]" : "[name].[hash:6].[ext]",
	    esModule: false,
},
{
     
	test:/.(woff|woff2|eot|ttf|otf|TTF|svg).*?$/,
	loader: "file-loader",
	options: {
     
	    name: devMode ? "[name].[ext]" : "[name].[hash:6].[ext]",
	    outputPath: "font",
	}
}