Estaba trabajando en webpack 4.44.2, me encuentro con este error cuando convierto a webpack5.0.0
ERROR en ./src/assets/sass/styles.scss La compilación del módulo falló (desde ./node_modules/mini-css-extract-plugin/dist/loader.js): Error: Automatic publicPath no es compatible con este navegador en E: \maktab\Control-panel\newcontrol\final-control\node_modules\css-loader\dist\cjs.js!
el error es del archivo de fuente bath en 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; }mi estructura src https://i.stack.imgur.com/vKyfW.png
estructura 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({}), ] }estilos.scss
@import "base/fonts"; @import "base/global"; @import "base/typography"; @import "base/links"; @import "components/components"; @import "components/demo";índice.js
import './assets/sass/styles.scss'; import 'normalize.css/normalize.css'; console.log("hellow from webpack5");Las soluciones sugeridas no funcionaron para mí. Sin embargo, descubrí que establecer publicPath en una cadena vacía funcionó.
output: { publicPath: '', ... }Encontré el mismo problema. Mi código se compila en la carpeta dist sin ninguna estructura adicional. El siguiente código funciona para mí y es simple ya que necesito una ruta vacía.
'module': { rules: [ { test: /\.css$/, use: [ { loader: MiniCssExtractPlugin.loader, options: { publicPath: '' } }, { loader: "css-loader" } ] } ] }También puedes volverte loco y hacer cosas así:
{ loader: MiniCssExtractPlugin.loader, options: { publicPath: (resourcePath, context) => { return path.relative(path.dirname(resourcePath), context) + '/'; }, }, },Puede encontrar detalles aquí: https://webpack.js.org/plugins/mini-css-extract-plugin/#the-publicpath-option-as-function
El error es causado por un error en mini-css-extract-plugin 1.3.8 y versiones anteriores en combinación con Webpack 5. Se activa cuando una hoja de estilo hace referencia a un recurso usando url(...) y la opción publicPath no está configurada explícitamente en la configuración del paquete web.
Me tomé el tiempo de reproducir e informar el problema aquí: https://github.com/webpack-contrib/mini-css-extract-plugin/issues/707
Ayer, se lanzó la versión 1.3.9 e incluye la solución para este problema. Debería poder resolver este error actualizando.