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

1. Что такое веб-пакет?

webpack — это сборщик модулей.
Подробнее можно прочитать здесь

2. Почему вебпак?

  • У нас есть куча разных тегов скриптов и добавление всех этих скриптов. Это выглядит беспорядочно, и когда он обращается к серверу для загрузки всех этих скриптов, это ухудшает производительность → Webpack собирает все эти зависимости и создает пакет.
  • Для SPA вы можете легко разделить свое приложение на несколько файлов и загрузить только тот код, который требуется странице — Разделение кода
  • Также мы можем преобразовать React или ES6 в ванильный JavaScript или препроцессировать SASS, LESS… в CSS.

….

3. Вот и мы

Первая практика, мы будем использовать nodejs vs NPM

  • откройте CLI в вашем проекте (пустая папка)
  • инициализация npm
  • npm и веб-пакет --save-dev
  • npm ijquery-- сохранить
  • создайте webpack.config.js следующим образом:
module.exports = {
  entry: './main.js',
  output: {
    filename: 'bundle.js'
  }
}
  • создайте main.js следующим образом:
var $ = require('jquery');
$('#root').html('Hello World!');
  • создайте index.html следующим образом:
<!DOCTYPE html>
<html>
<head>
  <title>My First Webpack Demo</title>
</head>
<body>
  <h1 id="root"></h1>
  <script type="text/javascript" src="./bundle.js"></script>
</body>
</html>

добавить скрипт запуска в package.json

"scripts": {
    "start": "webpack --config webpack.config.js"
}

теперь мы запускаем npm start

🎉 💥… А если возникнут проблемы, можете сослаться сюда 🍀 💦