@virtualhero

Webpack 3: что за проблема с css и file лоадерами?

По урокам И. Кантора (хотя я понимаю что они уже старые) пробовал разобраться со сборкой файлов + попутно в интернете серфил инфу, так как уроки уже старенькие, но безуспешно.

В общем вот конфиг вебпака:
'use strict';

const NODE_ENV = process.NODE_ENV || 'development';
const webpack = require('webpack');
const path = require('path');

module.exports = {

	context: path.resolve(__dirname, 'frontend'),

	entry: {
		main: './main'
	},

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

	watch: NODE_ENV === 'development',

	watchOptions: {
		aggregateTimeout: 100
	},

	devtool: NODE_ENV === 'development' ? 'cheap-inline-module-source-map' : null,

	plugins: [
		new webpack.NoEmitOnErrorsPlugin(),
	],

	module: {

		rules: [

			{
				test: /\.js$/,
				exclude: /(node_modules|bower_components)/,
				use: {
					loader: 'babel-loader',
					options: {
						presets: ['env'],
						plugins: ['transform-runtime']
					}
				}
			},

			{
				test: /\.css$/,
				use: ['css-loader']
			},
			
			{
				loader: 'file-loader',
				query: {
					useRelativePath: true
				}
			}

		],

	}

};


вот такая структура:
d4a29a48d1cd4d719e3ddb8e96a1f91f.jpg

это код который находится в menu/index.js, который подключается в main.js
import './menu.css';

export default class Menu {
	constructor(options) {
		this.elem = document.getElementById('menu');

		this.title = this.elem.querySelector('.title');

		this.title.onclick = () => this.elem.classList.toggle('open');
	}
}


и на выходе, в папку public попадает такой файл fc9dd5daeb344e070521a4e603103ca7:
4e54cbe48c5b413cba3bfa5b18a5eb87.jpg
его содержимое:
'use strict';

import Menu from './menu';

let pandaMenu = new Menu({
	title: 'Меню панды',
	items: [{
		text: 'яйца',
		href: '#eggs'
	}, {
		text: 'Мясо',
		href: '#meat',
	}]
});

document.body.appendChild(pandaMenu.elem);


замечу, что css-loader и file-loader у меня подключены не так как в скринкасте, дело в том, что как у Ильи они не работают, я ставил по докам https://webpack.js.org/loaders/css-loader/ и https://github.com/webpack-contrib/file-loader.

подскажите пожалуйста, почему у меня не получается файлы собрать? что я упускаю?
хочу создать проект с помощью вебпака, но это 2х дневная головная боль со сборкой файлов...
  • Вопрос задан
  • 1343 просмотра
Решения вопроса 1
larisamoroz
@larisamoroz
Курю маны, втыкаю в код, ваяю, починяю.
Уроки Кантора очень сильно устарели, соответственно, полученный конфиг — тоже.

1. файл fc9dd5daeb344e070521a4e603103ca7 — это, вероятно, source map (погуглите).
2. Для того, чтобы подключать css отдельными файлами вам нужен extract-text-webpack-plugin

Более современное руководство, где всё хорошо разложено: https://loftblog.ru/material/1-vvedenie-v-webpack-2/
Освоите за полчаса.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы