MiniCSSExtractPlugin处理css文件中的url

做项目的时候，突然发现一个容易犯错的问题

1、webpack中对css文件的处理使用的是： MiniCSSExtractPlugin、css-loader、post-loader。

            {
                test: /\.css$/,
                use: [
                    miniCssExtractPlugin.loader,
                    // "style-loader", 
                    {
                        loader: "css-loader",
                        options: {
                            // 设置后，就算使用import引入的样式，也会执行后面的loader
                            importLoaders: 2
                        }
                    },
                    "postcss-loader"
                ],
            },

2、在plugins中也相对应的设置一个MiniCssExtractPlugin，打包后将css文件单独抽离到了css文件夹下

    plugins:[
        new htmlWebpackPlugin({
            template: "./src/index.html",
            filename: "index.html",
            chunks: ["main"],
        }),
        new CleanWebpackPlugin(),
        new miniCssExtractPlugin({
            filename: "css/[name]-[contenthash:6].css",
        })
    ]

3、打包后的目录

image.png

4、打包后的css里面的url

image.png
显然按照现在，是找不到图片的
5、解决办法，查阅官网，配置MiniCSSExtractPlugin.loader的publicPath即可。
image.png

6、再次打包，url引入正确

image.png

很简单，但是如果不注意，还真的很容易掉坑里！！