Javascript 此浏览器不支持Webpack5自动公共路径

我正在处理Webpack4.44.2，当我转换到webpack5.0.0时，我遇到了这个错误

在./src/assets/sass/styles.scss中出错 模块构建失败（来自./node\u modules/mini css extract plugin/dist/loader.js）： 错误：此浏览器不支持自动公共路径 在E:\maktab\Control panel\newcontrol\final Control\node\u modules\css loader\dist\cjs

错误来自fonts.scss中的字体文件bath

@font-face{
字体系列：“Janna LT”；
src:local（“Janna LT”）、url（../font/Janna.woff）格式（“woff”）；
字体大小：正常；
}
@字体{
字体系列：“Janna LT”；
src:local（“Janna-LT”）、url（../font/Janna-bold.woff）格式（“woff”）；
字体大小：粗体；
}

在您的webpack.config.js中，您必须执行以下操作，以使用如下所示的环境变量或它将使用的根

//第一步 const ASSET_PATH=process.env.ASSET_PATH | |'/'

//步骤2 内部输出对象如下所示： 公共路径：资产路径

//步骤3 内部插件如下所示： 'process.env.ASSET\u PATH'：JSON.stringify（ASSET\u PATH）

有关更多信息，请参阅此处，

---

我遇到了同样的问题。我的代码编译到dist文件夹中，没有任何进一步的结构。下面的代码对我来说很简单，因为我需要一个空路径

'module': {
        rules: [
            {
                test: /\.css$/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader, 
                        options: {
                            publicPath: ''
                        }
                    },
                    {
                        loader: "css-loader"
                    }
                ]
            }
        ]
    }

你也可以发疯，做类似的事情：

{
    loader: MiniCssExtractPlugin.loader,
    options: {
        publicPath: (resourcePath, context) => {
            return path.relative(path.dirname(resourcePath), context) + '/';
        },
    },
},

您可以在此处找到详细信息：

您可以尝试以下方法：

//add output.publicpath
output: {
  publicPath: '/',
  ...
}

---

建议的解决方案对我不起作用。然而，我发现将

publicPath

设置为一个空字符串就成功了

output: {
  publicPath: '',
  ...
}

---

我认为将

publicPath

添加到

MiniCssExtractPlugin.loader

参考：

---

在使用“文件加载器”加载图像时，我也遇到了同样的错误。我只是提供了输出路径。但是，我还提供了具有相同值的publicPath，并且它工作正常

{
    test: /\.svg$/i,
    use: {
        loader: 'file-loader',
        options: {
            name: "[name].[ext]",
            outputPath: "imgs",
            publicPath: 'imgs',
        }
    }
  },

outputPath：告诉将图像/文件放在何处。

publicPath：是插入html中img元素的src=”“中的路径

<img src="imgs/webpack.svg"/>

---

因此，两者应该具有相同的路径。

该错误是由mini css extract plugin 1.3.8及更低版本与Webpack 5结合使用时出现的错误造成的。当样式表使用

url（…）

引用资源，并且未在网页包配置中明确设置

publicPath

选项时，会触发此选项

我花时间在这里复制并报告了这个问题：

---

昨天，1.3.9版已经发布，其中包括针对该问题的修复。您应该能够通过升级来解决此错误。

它工作正常，没有任何错误；用StyleLoder替换迷你css提取插件时！！！由于我怀疑这是迷你css提取插件的一个bug，我用最小复制打开了一个问题：谢谢，@mannawarhussain。我的想法是在publicpath中，在输出中添加publicpath:“/”，解决我的问题。这是我的第一次尝试。它产生了像/foo.jpg这样的绝对路径，如果图像、css和js与css文件放在同一个dist文件夹中，它将不起作用：）你能告诉我如何使用该函数吗？例如，我们是否需要使用src更改“resourcePath”。。或者改变上下文！！如果使用样式加载器，请不要忘记删除样式加载器。否则会出现以下错误：通过删除

样式加载器

将其修复。来自这个@Northernsle解决方案的信息对我有效…Pfff！非常感谢！这让我发疯，我正要删除迷你css提取插件，谢谢你，是的，这确实解决了问题！谢谢你，我是阿尤多·穆乔。

<img src="imgs/webpack.svg"/>