使用mini-css-extract-plugin插件CSS的路径问题，图片不显示的解决办法为设置公共路径 | webpack plugin

最新推荐文章于 2026-05-06 09:26:46 发布

原创最新推荐文章于 2026-05-06 09:26:46 发布 · 2.3k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#webpack #js #css #node #node.js

前端学习专栏收录该内容

84 篇文章

订阅专栏

本文讲述了在使用MiniCssExtractPlugin时，如何修正由于css文件位置改变导致的图片引用问题，关键在于设置正确的publicPath。通过设置publicPath为'../'，确保资源路径指向正确的位置。

当使用MiniCssExtractPlugin生成的css在dist下一个文件夹时(如dist/css/style.css)，此时如果不设置生成的css的公共路径(publicPath)，图片不会正常显示。

因为css-loader以为生成的style.css文件直接在dist目录下，所以图片路径会默认设置为url(./随机名字.png)，而事实上图片的正确的路径为url(../随机名字.png)。

  img-demo
  |- package.json
  |- webpack.config.js
  |- /dist
    |- index.js
    |- index.html
+   |- 随机字符.png
+   |- /css
+    	|- style.css
  |- /src
    |- icon.png
    |- style.css
    |- index.js
  |- /node_modules

因此，需要在options中设置publicPath为../，这样该css文件引入的所有url前面都会加上../的前缀。

webpack.config.js

const path = require('path');
const MiniCssExtractPlugin=require('mini-css-extract-plugin');

module.exports = {
    entry: {
        index: './src/index.js',
    },
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist'),
    },
    module:{
        rules:[
            {
                test:/\.css$/i,
                //此时生成的css在dist/css的文件夹下，要设置公共路径
                //这样该css文件所有的url前面都会加上../的前缀。
+                use:[{
+                    loader:MiniCssExtractPlugin.loader,
+                    options:{
+                        publicPath:'../'
+                    }
+                }, 'css-loader']},
            {
                test:/\.(png|svg|jepg|gif)/,
                type:'asset/resource'
            }
        ]  
    },
    plugins: [
+        new MiniCssExtractPlugin({
+            //在dist/css文件夹下创建一个index.css文件
+            filename:'css/[name].css'
+        })
    ],
    mode: 'development'
};

ps：如果想要复制上面的代码，请去掉+号。+号仅用来突出显示需要添加的代码。