Webpack5 Automatic publicPath n'est pas pris en charge dans ce navigateur

Question

Je travaillais sur webpack 4.44.2, je suis confronté à cette erreur lorsque je convertis en webpack5.0.0

ERREUR dans ./src/assets/sass/styles.scss La construction du module a échoué (à partir de ./node_modules/mini-css-extract-plugin/dist/loader.js): Erreur: Automatic publicPath n'est pas pris en charge dans ce navigateur à E: \ maktab \ Control-panel \ newcontrol \ final-control \ node_modules \ css-loader \ dist \ cjs.js!

l'erreur provient du bain de fichiers de polices dans 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;
}

ma structure src https://i.stack.imgur.com/vKyfW.png

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

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

Les solutions suggérées n'ont pas fonctionné pour moi. Cependant, j'ai trouvé que le réglage publicPathsur une chaîne vide faisait l'affaire.

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

Answer 2

J'ai rencontré le même problème. Mon code se compile dans le dossier dist sans autre structure. Le code suivant fonctionne pour moi et est simple car j'ai besoin d'un chemin vide.

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

Vous pouvez aussi devenir fou et faire des choses comme ça:

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

Détails que vous pouvez trouver ici: https://webpack.js.org/plugins/mini-css-extract-plugin/#the-publicpath-option-as-function

Answer 3

Dans votre webpack.config.js, vous devez faire ce qui suit, soit utiliser la variable d'environnement comme suit, soit la racine qu'elle prendra.

// étape-1 const ASSET_PATH = process.env.ASSET_PATH || '/';

// étape-2 à l'intérieur de l'objet de sortie comme ci-dessous: publicPath: ASSET_PATH

// étape-3 À l'intérieur des plugins comme ci-dessous: 'process.env.ASSET_PATH': JSON.stringify (ASSET_PATH)

Pour plus d'informations, reportez-vous ici, https://webpack.js.org/guides/public-path/

Answer 4

vous pouvez essayer de cette façon:

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

Answer 5

Je pense qu'il sera utile d'ajouter publicPathà la optionsdeMiniCssExtractPlugin.loader

référence: mini-css-extract-plugin

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

Answer 6

L'erreur est causée par un bogue dans mini-css-extract-plugin 1.3.8 et inférieur en combinaison avec Webpack 5. Elle est déclenchée lorsqu'une feuille de style fait référence à une ressource utilisant url(...)et que l' publicPathoption n'est pas définie explicitement dans la configuration de Webpack.

J'ai pris le temps de reproduire et de signaler le problème ici: https://github.com/webpack-contrib/mini-css-extract-plugin/issues/707

Hier, la version 1.3.9 a été publiée et inclut le correctif de ce problème. Vous devriez être en mesure de résoudre cette erreur en effectuant une mise à niveau.

Answer 7

J'obtenais également la même erreur lors du chargement d'images à l'aide de 'file-loader'. Je ne fournissais que le outputPath. Mais ensuite, j'ai également fourni publicPath avec la même valeur et cela a fonctionné.

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

outputPath: indique où placer les images / fichiers.

publicPath: est le chemin inséré dans src = "" de l'élément img en html.

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

Les deux devraient donc avoir le même chemin.

Answer 8

J'ai eu le même problème, le moyen le meilleur et le plus rapide est de mettre à jour mini-css-extract-plugin vers la dernière version (1.4.1 a fait le travail pour moi)