此浏览器不支持 Webpack5 自动 publicPath

Question

我正在处理 webpack 4.44.2，当我转换为 webpack5.0.0 时遇到这个错误

错误在 ./src/assets/sass/styles.scss 模块构建失败（来自 ./node_modules/mini-css-extract-plugin/dist/loader.js）：错误：此浏览器不支持自动 publicPath 在 E: \maktab\Control-panel\newcontrol\final-control\node_modules\css-loader\dist\cjs.js！

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

@font-face {
    font-family: "Janna LT";
    src: local("Janna LT"), url(../fonts/janna.woff) format("woff");
    font-weight: normal;
}

@font-face {
    font-family: "Janna LT";
    src: local("Janna LT"), url(../fonts/janna-bold.woff) format("woff");
    font-weight: bold;
}

我的 src 结构 https://i.stack.imgur.com/vKyfW.png

dist 结构 https://i.stack.imgur.com/mLgmF.png

webpack.config.js

const path = require('path');

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
    entry:  {
      'main': './src/index.js',
    },
  
    output: {
      path: path.join(__dirname, "/dist"),
      filename: '[name].js',
    }, 

    devServer: {
        contentBase: path.join(__dirname, "/dist"),
        port: 8087,
        writeToDisk: true,
        overlay :true
    },
    

    module: {
        rules: [
    
            {
                test: /\.html$/,
                use: [
                    {
                        loader: "html-loader",
                    }
                ]
            },

            {
                test: /\.(sa|sc|c)ss$/,
                use: [
                MiniCssExtractPlugin.loader, 
                'css-loader', 
                'postcss-loader',
                'sass-loader'
                ]
            },
                    
            {
                test: /\.(png|svg|jpe?g|gif)$/,
                exclude: /fonts/,
                use: [
                    {
                        loader: "file-loader", 
                        options: {
                        name: '[name].[ext]',
                        outputPath: "/assets/images",
                        }
                    }
                ]
            },

            {
                test: /\.(svg|eot|woff|woff2|ttf)$/,
                exclude: /images/,
                use: [
                    {
                        loader: "file-loader", 
                        options: {
                        name: '[name].[ext]',
                        outputPath: "assets/fonts",
                        }
                    }
                ]
            },

        ]
    },

    plugins: [
        new CleanWebpackPlugin(),

        new HtmlWebpackPlugin({ 
          filename: "index.html",
          template: "./src/index.html",
          chunks: ['main']
        }),
      

        new MiniCssExtractPlugin({filename: "assets/css/styles.css"}),
        new OptimizeCSSAssetsPlugin({}),
    ]
    
} 

样式.scss

@import "base/fonts";
@import "base/global";
@import "base/typography";
@import "base/links";
@import "components/components";
@import "components/demo";

索引.js

import './assets/sass/styles.scss';
import 'normalize.css/normalize.css';

console.log("hellow from webpack5");

Answer 1

建议的解决方案对我不起作用。但是，我发现设置publicPath为空字符串可以解决问题。

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

Answer 2

我遇到了同样的问题。我的代码编译到 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) + '/';
        },
    },
},

您可以在此处找到详细信息：https : //webpack.js.org/plugins/mini-css-extract-plugin/#the-publicpath-option-as-function

Answer 3

该错误是由 mini-css-extract-plugin 1.3.8 及更低版本与 Webpack 5 结合使用时的错误引起的。当样式表引用使用的资源url(...)并且publicPath未在 Webpack 配置中显式设置该选项时，会触发该错误。

我花时间在这里重现并报告问题：https://github.com/webpack-contrib/mini-css-extract-plugin/issues/707

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

Answer 4

你可以尝试这样：

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

Answer 5

在 webpack.config.js 中，您必须执行以下操作，要么使用如下的环境变量，要么使用它将采用的根。

//步骤1 const ASSET_PATH = process.env.ASSET_PATH || '/';

//step-2 内部输出对象如下： publicPath: ASSET_PATH

//step-3 插件内部如下： 'process.env.ASSET_PATH': JSON.stringify(ASSET_PATH)

有关更多信息，请参阅此处， https://webpack.js.org/guides/public-path/