didolf/.md Secret

## .md

      
    Raw
  

              .md
            
          
    Блок 1.6. Задание. How to start

Для начала склонируйте к себе репозиторий https://github.com/alex-karo/webpack-static-template(git clone https://github.com/alex-karo/webpack-static-template).
В репозитории уже настроены:

webpack
autoprefixer
scss-loader

Что такое webpack?
Более подробно про webpack
Что такое автопрефиксер?

Автопрефиксер - это утилита, которая сама расставляет вендорные префиксы к css-свойствам.
Посмотреть в действии.
Как начать разработку?

Раньше вы писали свой html в файле index.html, а css - в файле style.css, который подключали на страницу с помощью link.
Сейчас все происходит абсолютно также, только подключением на страницу стилей занимается webpack. Вы указываете ему точку входа, он проходит по всем импортам из этой точки, собирает все в один файл, и подключает его на страницу.
То же самое происходит с js-файлами. Webpack берет файл, являющийся точкой входа, проходит по всем импортам, и собирает все в один файл.
Точка входа для scss: src/scss/style.css.
Чтобы добавить какой-то файл в сборку, напишите в src/scss/style.css:
@import './path/to/filename.scss';
P.S: Если в файле, который уже импортирован в src/scss/style.css написать другой @import, то webpack заберет и его.
Как разделять css на файлы?

Разделяйте на основе БЭМ-блоков: один файл - один блок.
Точка входа для js: src/js/index.js.
Чтобы добавить какой-то файл в сборку, напишите в src/js/index.js.
import fileName from './path/to/filename';
В другом файле(который вы импортируете нужно экспортировать функции/переменные/...
export const myVariable = 'Block 7';
Импорты и экспорты (Кантор)
P.S: Если в файле, который уже импортирован в src/js/index.js написать другой import, то webpack заберет и его.
Куда класть картинки?

Картинки нужно добавлять в папку src/img, а в html подключать как ./img/....
Как посмотреть результат?

После сборки webpack кладет все файлы в папку dist.
Чтобы посмотреть ваш проект откройте файл dist/index.html в браузере.
Вы также можете посмотреть собранные js-файлы в папке dist/js и css-файлы в папке /dist/css'.
Вопросы

Почему точка входа это именно файл src/js/index.js?

Потому что мы указали это здесь.
Можете поменять точку входа и переименовать/поменять файлы и посмотреть что произойдет.
Почему точка входа для scss именно src/scss/style.scss?

Потому что мы импортировали этот файл в нашу js-точку входа.
Как webpack понимает, что делать с импортами вида *.scss?

Мы указываем это в конфиге.
Кстати, с картинками и шрифтами происходит то же самое.
Нужно ли мне подключать autoprefixer?

Нет, мы уже сделали это за вас.