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

• « 上一篇：HR问“你目前有几个offer”，聪明人会怎么说？
• » 下一篇：计算平均分和最高最低分