Подключение css в webpack
 

Доброго времени суток. Коллеги прошу помочь или дать толчек, начал разбираться с webpack, есть существенно не понимание того как он работает с css

1) Непонимание №1. Подключение сss в webpack.
Я следуя гайду на хабре, разобрался с основами, добрался до подключения css, делаю все как написано в гайде, настраиваю конфиг вебпака, подключаю цсс файл внутри своего входного js файла через require, все проходит успешно, бандл запускается, все хорошо, но вот дальше не понимаю..., ну подключил я цсс файл в webpack, в index.html он не как не подключился, следовательно не работает. От сюда возникает вопрос - зачем тогда это все нужно, зачем цсс подключать в входном файле js? или я все таки что-то не так сделал и цсс каким-то магическим образом должен был подключится в index.html

2) Непонимание №1. Как быть с плагинами
Например slick-carousel - наверное самый популярный плагин для создания слайдеров. Не мудренно что он состоит из библиотеки написанной на JQ и файла css. C первой частью проблем не каких - идем в входной файл js, пишем require и подключаемся по название плагина, который ранее загрузили c npm. Но как теперь быть со стилями, файл то css не куда не подключается при этом?

Может быть данные вопросы покажутся слишком глупыми, но мне стеснятся нечего)) глухое непонимание куда хуже какой либо глупости)

Искренне прошу любого совета или объяснения:help:

Еще нужно style-loader и css-loader подключить, чтобы стили писались inline в head. Ну или extract-css, чтобы отдельным файлом. Второй вопрос решится после решения первого.

destus, добрый день, спасибо что откликнулись. Вчера с горем по полам разобрался с этими вопросами, но возникли новые, и буду очень благодарен за помощь с ними.

Cамое насущное - получается проблема после компиляции всего проекта. У меня простой тестовый проект, к нему подключены 2 простеньких плагина на JQ которые использую свои шрифты и некоторые изображение (их я устанавливаю с помощью npm) + использую изображения и шрифты которые сам загрузил для этого проекта.
Мои изображения и шрифты находятся в папках library/img и library/fonts соответственно, а то что идет вместе с плагинами находится где-то в node_modules

Все эти картинки и шрифты используются в scss и подключается по средствам ur(../)

В чем суть проблемы - после того как мой проект компилируется, он создают результирующие файлы .js и .css в папке dist, а картинки и шрифты которые они пытаются подключить лежат уже совершенно в другой папке, они остались в папке library. В результате не сложно предугадать что все мои подключения через ur(../) теперь не работаю и дают 404 ошибку.

Очевидное решение - нужно сделать так что бы все изображения и шрифты которые используются в моем файле scss также как и файлы .js и .css отправлялись в папку dist, в процессе компиляции.

Что я пытаюсь для этого сделать:
1) установил file-loader
2) в конфиге вебпака пишу следующее:

//...
module: {
    rules: [
         //...
         {
              test: /\.(png|jpg|gif|svg)$/,
              loader: "file-loader?name=/img/[name].[ext]"
         },{
              test: /\.(woff|woff2|ttf|eot)$/,
              loader: "file-loader?name=/fonts/[name].[ext]"
         }
         //...
    ]
}
//...

Но чуда не происходит, компиляция происходит успешно, .js и .css файлы обновляются в папке dist но не изображения не шрифты там не появляются((

Подскажите пожалуйста, что делаю не так?

smart-create,
Должны файлы из library перенестись в dist/img и dist/fonts. Если этого не происходит, то нужен более полный анализ. Есть скринкаст, там и file-loader используется, посмотрите http://learn.javascript.ru/screencast/webpack