Почему webpack выдает ошибку с путями?

Question

[uzi_no_uzi]

Webpack выдает такого вида ошибку:

Вот сам конфиг:

const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CopyPlugin = require('copy-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');


const PATHS = {
	src: path.join(__dirname, './src'),
	dist: path.join(__dirname, './dist'),
	js: 'js/bundle.js',
	css: 'css/style.css',
}

module.exports = {
	externals: {
		paths: PATHS,
	},
	entry: {
		app: PATHS.src,
	},
	output: {
		path: PATHS.dist,
		filename: PATHS.js,
		publicPath: '/',
	},
	module: {
		rules: [
		{
			test: /\.js$/,
			loader: 'babel-loader',
			exclude: '/node_modules/',
		}, 
		{
      test: /\.(jpe?g|png|gif|svg)$/,
      use: [
        {
          loader: 'file-loader',
          options: {
						name: "[path][name].[ext]",
          }
        },
        {
          loader: 'image-webpack-loader',
          options: {
            mozjpeg: {
              progressive: true,
              quality: 65
            },
            optipng: {
              enabled: false,
            },
            pngquant: {
              quality: '65-90',
              speed: 4
            },
            gifsicle: {
              interlaced: false,
            },
            svgo: {
              enabled: false,
            }
          }
        }
      ]
    },
		{
			test: /\.less$/,
      use: [
        {
        	loader: 'style-loader',
        },
        {
        	loader: MiniCssExtractPlugin.loader,
        }, 
        {
        	loader: "css-loader",
        	options: {
        		sourceMap: true,
        	}
        },
        {
        	loader: "postcss-loader",
        	options: {
        		sourceMap: true,
        		config:  {
        			path: 'postcss.config.js',
        		}
        	}
        },
        {
        	loader: "less-loader",
        	options: {
        		sourceMap: true,
        	}
        }
      ]
		},
		{
			test: /\.css$/,
			use: [
				{
        	loader: 'style-loader',
        },
        {
        	loader: MiniCssExtractPlugin.loader,
        }, 
        {
        	loader: "css-loader",
        	options: {
        		sourceMap: true,
        	}
        },
        {
        	loader: "postcss-loader",
        	options: {
        		sourceMap: true,
        		config:  {
        			path: 'postcss.config.js',
        		}
        	}
        },
			]
		}]
	},
  	plugins: [
  	  new MiniCssExtractPlugin({
  	    filename: PATHS.css,
  	  }),
  	  new HtmlWebpackPlugin({
  	  	hash: false,
  	  	template: `${PATHS.src}/index.html`,
  	  	filename: 'index.html',
  	  }),
  	  new CopyPlugin([
  	  	{
      	  from: 'src/fonts',
      	  to: 'fonts',
      	},
      ]),
  	],
}

Вот таким образом прописываю пути:

@font-face {
    font-family: 'Druk';
    src: url('/../fonts/Druk-Medium.eot');
    src: url('/../fonts/Druk-Medium.eot?#iefix') format('embedded-opentype'),
        url('/../fonts/Druk-Medium.woff2') format('woff2'),
        url('/../fonts/Druk-Medium.woff') format('woff'),
        url('/../fonts/Druk-Medium.ttf') format('truetype'),
        url('/../fonts/Druk-Medium.svg#Druk-Medium') format('svg');
    font-weight: 500;
    font-style: normal;
}

Этот код находится в less файле и обрабатывается webpack'ом.

Почему прописывал путь таким образом? Потому что подобная ошибка уже возникала ранее, когда я пытался поставить картинку на фон таким образом:

background: url(../img/img.jpg);

Мне посоветовали сделать так:

background: url(/img/img.jpg);

И это сработало каким-то чудом.

Если с шрифтами проделать такую же фишку, то webpack не выкидывает ошибку, но путь к шрифтам указан не верно, это можно увидеть если посмотреть в css код после обработки:



Перед слешем должны стоять две точки ..

Так как структура проекта такова:



То есть все шрифты лежат в папке fonts, а css код, откуда идет обращение к этим шрифтам, лежит в папке css.

Как можно решить проблему?

Comments

[starodubtsev]

Попробуйте убрать / в начале путей

@font-face {
    font-family: 'Druk';
    src: url('../fonts/Druk-Medium.eot');
    src: url('../fonts/Druk-Medium.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Druk-Medium.woff2') format('woff2'),
        url('../fonts/Druk-Medium.woff') format('woff'),
        url('../fonts/Druk-Medium.ttf') format('truetype'),
        url('../fonts/Druk-Medium.svg#Druk-Medium') format('svg');
    font-weight: 500;
    font-style: normal;
}

[uzi_no_uzi]

starodubtsev, Это не работает, выдается ошибка, которая на скрине

Answer 1

[lamer350]

Никакой проблемы по сути нет, просто получился корневой относительный путь, когда выгрузите сайт на сервер - все будет работать.
С точками путь относительно файла css рассчитывается и ошибка у вас скорее всего потому что less в папке внутри css и вебпак при компиляции проверяет пути относительно вашего less файла, а не будущего css.

Comments

[uzi_no_uzi]

Что мне делать при разработке? Мне надо как-то чтобы шрифты попадали с такими путями)

[lamer350]

uzi_no_uzi, использовать виртуальный сервер либо компилить less другими путями, тот же саблайм умеет это делать сам и таких проблем не будет.

[uzi_no_uzi]

lamer350, Так webpack и использует виртуальный сервер, а этот путь все равно не работает. Компилить less другими путями это тоже такое себе

[lamer350]

uzi_no_uzi, ну тогда не понятно что вас не устраивает? на вашем скрине пути к шрифтам нормальные если запуск верстки из виртуального сервера.