webpack 4

💼 Упражнение 4

Настройки webpack

Переименуем папку 📂 src

Пусть теперь она называется 📂 js

Переименуем также файл 📝 index.js

Пусть теперь он называется 📝 script.js

Теперь изменим настройки запуска webpack в файле package.json:

📝 package.json

"scripts": {
    "dev": "webpack --mode development ./js/script.js --output ./build/index.js --watch",
    "build": "webpack --mode production ./js/script.js --output ./build/index.js --watch"
}

📝 index.html

Не забудьте внести соответствующие изменения в файл 📝 index.html

Результирующий бандл будет теперь в папке 📂 build и называться он будет 📝 index.js

Изменим значение src тега script соответствующим образом:

🔧 Сборка

Теперь запускайте сборку приложения одной из команд:

npm run dev       

или

npm run build

( мы заменили prod на build в package.json )

и открывайте index.html в браузере

---

🔧 npm run dev

👁‍🗨 --watch

Сейчас webpack находится в режиме наблюдения за нашими исходными файлами,
потому что мы использовали опцию --watch

Давайте внесем изменения в файл 📝 script.js

📝 script.js

import promise from './promise.js'

promise.then ( response =>
  document.querySelector ( '.sampleClass' ).innerText += response )

document.body.appendChild (
    document.createElement ( 'img' )
).src = "https://sites.google.com/site/eternalfallout/alienhead-detailed.jpg"

Перезагрузите страницу в браузере, и вы увидите, что webpack автоматически собрал заново наше приложение, и внесенные нами изменения уже отображаются на странице 😉

Теперь можно удалить папку 📂 dist