webpack use mini-css-extract-plugin Some pits in the process

in use webpack Of mini-css-extract-plugin Plug in time , pack css There is a problem with the path of the reference file in the post stylesheet , Follow the online tutorial , Most of them are about revision publicPath
In conclusion , It's really just a matter of publicPath Change to : "../" that will do

however , It should be noted that , When file-loader perhaps url-loader Configured publicPath Time
,mini-css-extract-plugin.loader In publicPath It will no longer be effective

So it should be configured like this in the end
{ 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", } }

• « 上一篇：STM32 Summary of bit band operation
• » 下一篇： Calculate the average score and the highest and lowest score