Что за ошибка при настройке Webpack?

Question

[greenfox07]

Суть такова: настраиваю сборщик webpack, хочу скомпилировать все less файлы и сложить их все в один css. Вылезла ошибка...



Код:

const path = require('path');
const webpack = require('webpack');

// Plugins

const ExtractTextPlugin = require('extract-text-webpack-plugin');

// Module settings
module.exports = {
	// Путь к проекту
	context: path.resolve(__dirname, 'src'),

	// Точки входа JS
	entry: {
		// Основной файл приложения
		app: [
			'./js/app.js',
			'./less/main.less'
		],
	},
						
	// Путь для собранных файлов

	output: {
		filename: 'js/[name].js',
		path: path.resolve(__dirname, 'dist'),
		publicPath: '../'
	},

	// devServer configuration

	devServer: {
		contentBase: './app'
	},

	module: {
		rules: [
			// less
			{
				test: /\.less$/,
				use: ExtractTextPlugin.extract({
					use: [
						{
							loader: 'css-loader',
							option: { sourceMap: true }
						},
						{
							loader: 'less-loader',
							option: { sourceMap: true }
						},
					],
					fallback: 'style-loader',
				})
			},
		],
	},

	plugins: [
		new ExtractTextPlugin(
			'./css/[name].css'
		),
	],
}

Answer 1

[Игорь Забродин]

options: { sourceMap: true }

Comments

[greenfox07]

исправил, спасибо, но теперь другая ошибка


webpack 4 если что. Я пробовал ставить extract-text-webpack-plugin максимальную версию, но не помогло

[Danila]

Since webpack v4 the extract-text-webpack-plugin should not be used for css. Use mini-css-extract-plugin instead.

[greenfox07]

Данила, поставил, но все равно ошибку выдает

const path = require('path');
const webpack = require('webpack');

// Plugins

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

// Module settings
module.exports = {
	// Путь к проекту
	context: path.resolve(__dirname, 'src'),

	// Точки входа JS
	entry: {
		// Основной файл приложения
		app: [
			'./js/app.js',
			'./less/main.less'
		],
	},
						
	// Путь для собранных файлов

	output: {
		filename: 'js/[name].js',
		path: path.resolve(__dirname, 'dist'),
		publicPath: '../'
	},

	// devServer configuration

	devServer: {
		contentBase: './app'
	},

	module: {
		rules: [
			// {
			// 	test: /\.js$/,
			// 	loader: 'babel-loader',
			// },
			{
				test: /\.less$/,
				use: [
					MiniCssExtractPlugin.loader,
					'css-loader',
					'style-loader',
					'less-loader'
				],
			}
		],
	},

	plugins: [
		new MiniCssExtractPlugin({
			filename: '[name].css',
		})
	],
}

[Игорь Забродин]

app: [
'./js/app.js',
'./less/main.less'
],

Попробуй убрать './less/main.less' отсюда, а в app.js сделать import './less/main.less';

[greenfox07]

Игорь Забродин,

[Игорь Забродин]

Просто ошибка в пути. Он прописывается от app.js. Кстати, eslint с плагином import подскажет это еще до сборки (+ можно использовать расширение path autocomplete и/или path intellisense для автокомплита в vscode).
А чтобы не иметь проблем с расстоновкой точек и правильных путей используй алиасы webpack:

resolve: {
    extensions: ['.js', '.json', '.jsx', '.css', '.less'],
    alias: {
      Styles: path.resolve(__dirname, 'src/less/')
}

Тогда можно будет делать так import 'Styles/app' в любом месте.