Початок роботи з Webpack [з прикладом проекту]

Webpack є модуль bundler що полегшує створення складних додатків JavaScript. Він набув серйозної тяги, оскільки громада React обрала його як основний інструмент побудови. Webpack є ні менеджер пакетів, ні завдання оскільки він використовує інший (більш просунутий) підхід, але його мета також є створити динамічний процес збирання.

Webpack працює з ванільним JavaScript. Ви можете використовувати його пов'язати статичні активи програми, такі як зображення, шрифти, таблиці стилів, сценарії в одному файлі піклуватися про всі залежності.

Вам не знадобиться Webpack для створення простого додатка або веб-сайту, наприклад, який має лише один JavaScript і один файл CSS і кілька зображень, однак це може заощадити життя більш складне застосування з кількома активами і залежностями.

Webpack проти завдання бігунів проти Browserify

Отже, як Webpack складається порівняно з іншими інструментами побудови такі як Grunt, Gulp або Browserify?

Grunt і Gulp є бігунами завдань. У своєму конфігураційному файлі ви вказати завдання, і виконавець завдань виконує їх. The робочий процес бігуна завдань в основному виглядає так:

Однак, Webpack є модуль bundler що аналізує весь проект, встановлює дерево залежностей, і створює вбудований файл JavaScript що він обслуговує браузер.

Browserify ближче до Webpack, ніж завдання бігунів, як це теж створює графік залежностей але це робиться тільки для модулів JavaScript. Webpack йде на крок далі, і він не тільки поєднує вихідний код, а й також інші активи такі як зображення, таблиці стилів, шрифти тощо.

Якщо ви хочете дізнатися більше про як Webpack порівнює з іншими інструментами збирання, Я рекомендую вам дві статті:

1. Ендрю Рея Webpack: Коли використовувати і чому на власному блозі
2. Cory House Browserify проти Webpack на freeCodeCamp (з чудовими ілюстраціями)

Дві вищезгадані ілюстрації - з Webpack матеріали довідника Pro React, інший ресурс, який варто подивитися.

Чотири основні концепції Webpack

Webpack має називаються чотири основні опції конфігурації “основні поняття” що потрібно визначити в процесі розробки:

1. Вхід - відправна точка графіка залежностей (один або кілька файлів JavaScript).
2. Вихідні дані - файл, де ви хочете випуск, який потрібно об'єднати (один файл JavaScript).
3. Навантажувачі - перетворення активів, які перетворити їх на модулі Webpack так що вони можуть бути додано до графіка залежностей. Наприклад, css-loader використовується для імпорту CSS-файлів.
4. Додатки - спеціальні дії та функціональні можливості виконується на зв'язці. Наприклад, i18n-webpack-плагін вбудовує локалізацію в розшарування.

Навантажувачі працюють на основі файлу перед компіляцією. Плагіни виконуються в пакетному коді, в кінці процесу компіляції.

Встановіть Webpack

До встановіть Webpack, відкрийте командний рядок, перейдіть до папки проекту і запустіть таку команду:

 npm init 

Якщо ви не хочете робити конфігурацію самостійно, ви можете зробити npm заповнити package.json файл з типовими значеннями з такою командою:

 npm init -y 

Далі встановіть Webpack:

 npm install webpack --save-dev 

Якщо ви використовували значення за промовчанням, це саме так package.json Файл має виглядати зараз (властивості можуть бути в іншому порядку):

 "name": "_tests", "version": "1.0.0", "description": "", "main": "webpack.config.js", "dependencies": "webpack": "^ 3.6 .0 "," devDependencies ": " webpack ":" ^ 3.6.0 "," скрипти ": " test ":" echo "" Помилка: не вказано тесту "&& exit 1", "ключові слова" ": []," автор ":" "," ліцензія ":" ISC " 

Створіть конфігураційний файл

Потрібно створити a webpack.config.js файл у кореневій папці проекту. Цей файл конфігурації відіграє центральну роль визначити чотири основні концепції (точки входу, вихід, навантажувачі, плагіни).

The webpack.config.js файл містить об'єкт конфігурації про які властивості потрібно вказати. У цій статті ми задамо чотири властивості відповідають чотирьом основним поняттям (запис, вихід, модуля, і підключати), але об'єкт config також має інші властивості.

1. Створіть точки входу

Ти можеш мати одну або кілька точок входу. Ви повинні визначити їх у запис власності.

Вставте наступний фрагмент коду в webpack.config.js файл. Це вказує одну точку входу:

 module.exports = entry: "./src/script.js"; 

Щоб вказати більше, ніж одну точку входу можна використовувати або масив, або синтаксис об'єкта.

У папці проекту, створити нове src папки а script.js файл всередині нього. Це буде ваш точка входу. Для цілей тестування просто розмістити рядок всередині неї. Я використав наступне (але ви також можете скористатися більш цікавим):

 const greeting = "Привіт. Я початковий проект Webpack."; document.write (вітання); 

2. Визначте вихід

Ти можеш мати тільки один вихідний файл. Webpack об'єднує всі активи в цей файл. Вам потрібно налаштувати вихід майно таким чином:

 const path = require ("шлях"); module.exports = запис: "./src/script.js", вивести: filename: "bundle.js", шлях: path.resolve (__ dirname, 'dist'); 

The ім'я файлу властивість визначає ім'я файлу в комплекті, в той час як шлях власності вказує назву каталогу. Наведений вище приклад створить /dist/bundle.js файл.

Хоча це не обов'язково, краще використовувати path.resolve () метод під час визначення шлях майно, як воно забезпечує точне дозвіл модуля (абсолютний шлях виведення створюється за різними правилами в різних середовищах, модульна роздільна здатність вирішує цю невідповідність). Якщо ви використовуєте шлях, тобі потрібно вимагати шлях Модуль вузла у верхній частині webpack.config.js файл.

3. Додайте навантажувачі

До додайте навантажувачі, потрібно визначити модуля власності. Нижче ми додаємо babel-loader що дозволяє безпечно використовувати функції ECMAScript 6 у файлах JS:

 const path = require ("шлях"); module.exports = запис: "./src/script.js", вивід: filename: "bundle.js", шлях: path.resolve (__ dirname, 'dist'), module: rules: [test : / js$/, exclude: / (node_modules | bower_components) /, використовуйте: loader: "babel-loader", options: presets: ["env"]]]; 

Конфігурація може здатися складною, але вона просто вставлена ​​з копії Документація Babel loader. Більшість навантажувачів постачаються з файлом readme або якоюсь документацією, тому можна (майже) завжди правильно налаштувати їх. Документи Webpack також мають сторінку, яка пояснює як налаштувати module.rules.

Можна додати стільки навантажувачів, скільки вам потрібно, Ось повний список. Зверніть увагу, що вам також потрібно встановити кожен завантажувач з npm щоб вони працювали. Для навантажувача Babel потрібно встановити необхідні пакети Node з npm:

 npm install --save-dev веб-завантажувач babel-core babel-preset-env 

Якщо ви подивитеся на свій package.json Файл, ви побачите, що npm додав три пакети, пов'язані з Babel devDependencies власності, вони подбають про компіляцію ES6.

4. Додайте плагіни

До додайте плагіни, потрібно вказати плагінів власності. Плюс, ви також повинні вимагати плагіни по одному, оскільки вони є зовнішніми модулями.

У нашому прикладі ми додаємо два Webpack плагіна: HTML плагін Webpack і Попереднє завантаження плагіна Webpack. Webpack має a приємний плагін екосистеми, Ви можете переглянути повний список тут.

Щоб вимагати плагінів як модулів Node, створити дві нові константи: HtmlWebpackPlugin і PreloadWebpackPlugin і використовувати вимагати () функції.

 const path = require ("шлях"); const HtmlWebpackPlugin = require ("html-webpack-plugin"); const PreloadWebpackPlugin = require ("preload-webpack-plugin"); module.exports = запис: "./src/script.js", вивід: filename: "bundle.js", шлях: path.resolve (__ dirname, 'dist'), module: rules: [test : / js$/, exclude: / (node_modules | bower_components) /, використовуйте: loader: "babel-loader", options: presets: ["env"]]], плагіни: [new HtmlWebpackPlugin (), новий PreloadWebpackPlugin ()]; 

Так само, як і у випадку з навантажувачами, вам також доведеться встановити плагіни Webpack за допомогою npm. Щоб інсталювати два плагіни в прикладі, виконайте наступні дві команди у командному рядку:

 npm встановити html-webpack-plugin --save-dev npm встановити --save-dev preload-webpack-plugin 

Якщо ви перевіряєте package.json Файл зараз, ви побачите, що npm додав два плагіни до devDependencies власності.

Запустіть Webpack

До створити дерево залежностей і вивести пачку, у командному рядку виконайте таку команду:

 webpack 

Це зазвичай займає одну або дві хвилини для Webpack для створення проекту. Після завершення ви побачите подібне повідомлення у вашій CLI:

Якщо все пішло правильно, Webpack створено dist папки в корені вашого проекту і розмістив два пов'язані файли (bundle.js і index.html) всередині неї.

Github repo

Якщо ви хочете перевірити, завантажити або роздрібнити весь проект, зверніться до нашого Github repo.