Webpack5 Automatic publicPath wird in diesem Browser nicht unterstützt

Question

Ich habe an Webpack 4.44.2 gearbeitet. Bei der Konvertierung in webpack5.0.0 tritt dieser Fehler auf

FEHLER in ./src/assets/sass/styles.scss Modulerstellung fehlgeschlagen (von ./node_modules/mini-css-extract-plugin/dist/loader.js): Fehler: Automatischer publicPath wird in diesem Browser unter E: nicht unterstützt. \ maktab \ Control-panel \ newcontrol \ final-control \ knotenmodule \ css-loader \ dist \ cjs.js!

Der Fehler stammt aus der Schriftdatei bath in 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;
}

meine src struktur https://i.stack.imgur.com/vKyfW.png

dist Struktur 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({}),
    ]
    
} 

styles.scss

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

index.js

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

console.log("hellow from webpack5");

Answer 1

Die vorgeschlagenen Lösungen haben bei mir nicht funktioniert. Ich fand jedoch, dass die Einstellung publicPathauf eine leere Zeichenfolge den Trick tat.

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

Answer 2

Ich bin auf das gleiche Problem gestoßen. Mein Code wird ohne weitere Struktur in den dist-Ordner kompiliert. Der folgende Code funktioniert für mich und ist einfach, da ich einen leeren Pfad benötige.

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

Sie können auch verrückt werden und solche Dinge tun:

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

Details finden Sie hier: https://webpack.js.org/plugins/mini-css-extract-plugin/#the-publicpath-option-as-function

Answer 3

In Ihrer webpack.config.js müssen Sie Folgendes tun, um entweder die Umgebungsvariable wie folgt oder den Stamm zu verwenden, den sie benötigt.

// Schritt 1 const ASSET_PATH = process.env.ASSET_PATH || '/';

// Schritt-2 Innerhalb des Ausgabeobjekts wie folgt: publicPath: ASSET_PATH

// Schritt 3 Innerhalb der Plugins wie folgt: 'process.env.ASSET_PATH': JSON.stringify (ASSET_PATH)

Weitere Informationen finden Sie hier, https://webpack.js.org/guides/public-path/

Answer 4

Sie können dies folgendermaßen versuchen:

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

Answer 5

Ich denke , es wird hilfreich sein , die hinzugefügt , publicPathum die optionsvonMiniCssExtractPlugin.loader

Referenz: Mini-CSS-Extrakt-Plugin

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

Answer 6

Der Fehler wird durch einen Fehler im Mini-CSS-Extract-Plugin 1.3.8 und niedriger in Kombination mit Webpack 5 verursacht. Er wird ausgelöst, wenn ein Stylesheet auf eine verwendete Ressource verweist url(...)und die publicPathOption in der Webpack-Konfiguration nicht explizit festgelegt ist.

Ich habe mir die Zeit genommen, das Problem hier zu reproduzieren und zu melden: https://github.com/webpack-contrib/mini-css-extract-plugin/issues/707

Gestern wurde Version 1.3.9 veröffentlicht, die das Update für dieses Problem enthält. Sie sollten in der Lage sein, diesen Fehler durch ein Upgrade zu beheben.

Answer 7

Ich habe auch den gleichen Fehler beim Laden von Bildern mit 'File-Loader' erhalten. Ich habe nur den Ausgabepfad bereitgestellt. Aber dann habe ich auch publicPath mit dem gleichen Wert versehen und es hat funktioniert.

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

outputPath: Gibt an, wo Bilder / Dateien abgelegt werden sollen.

publicPath: ist der Pfad, der in src = "" des img-Elements in HTML eingefügt wird.

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

Also sollten beide den gleichen Weg haben.

Answer 8

Ich hatte das gleiche Problem. Der beste und schnellste Weg ist, das Mini-CSS-Extrakt-Plugin auf die neueste Version zu aktualisieren (1.4.1 hat den Job für mich erledigt).