Предвариательно создаем на компьютере папку проекта.
Запускаем Терминал (для Mac) или Git Bash (для Windows) и находим в нем созданную папку.
Памятка по работе в терминале
cd — change directory, смена директори (папки)
Перейти в «домашнюю» директорию. Произойдёт переход в папку вашего пользователя.
cd
Аналогичная команда
cd ~/
Зайти в папку
cd folder-name
Зайти в папку внутри другой папки
cd folder-name/another-folder-name
Выйти из папки на один уровень наверх
cd ..
Выйти из папки на два уровня наверх
cd ../..
ls — list, показать список файлов и папок в директории, в которой мы сейчас находимся
ls
mkdir — make directory, создать новую директорию (папку)
mkdir folder-name
touch — создать файл
Указывается название файла с расширением, например index.html
touch filename.extension
rm — remove, удалить файл/папку
Удалить файл
rm filename
Удалить папку
rm -rf folder-name
Устанавливаем Yarn на выбранный проект
В командной строке пишем команду:
yarn init
Далее в проект устанавливаем Webpack. Прописываем команду:
yarn add -D webpack
Дополнительно ставим пакет для HTML командой:
yarn add -D html-webpack-plugin
Подключаем Git
Инициализируем Git репозиторий
git init
Создаём файл .gitignore и кладём в него этот код
.DS_Store .thumbs yarn-error.log /node_modules /dev_build/*.html /dev_build/*.css /dev_build/*.js /dev_build/*.png /dev_build/*.jpg /dev_build/*.jpeg /dev_build/*.gif /dev_build/*.svg /dev_build/*/*.*
Создаём в папке dev_build файл .keep и запускаем в терминале поочерёдно:
git status git add . git status git commit -am "Init commit"
Устанавливаем бандлер Webpack
Cоздаём webpack.config.js, туда добавляем код:
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
const path = require('path');
module.exports = {
mode: 'development',
entry: "./src/index.js",
output: {
path: path.resolve(__dirname, 'dev_build'),
filename: 'index.js',
},
plugins: [new HtmlWebpackPlugin({ template: './src/index.html' })],
};