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

最新推荐文章于 2024-08-09 07:30:56 发布

小鞠由依

最新推荐文章于 2024-08-09 07:30:56 发布

阅读量5.6k

点赞数

文章标签： html javascript node.js

本文链接：https://blog.csdn.net/qq_37431622/article/details/108045465

版权

在使用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",
	}
}