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",
	}
}