В этой записи я расскажу вам что такое Webpack, для чего он нужен и как начать им пользоваться.Я не стал придумывать новый велосипед, поэтому взял официальную документацию проекта. Я лишь постараюсь описать все еще проще чем у них.
Для понимаю этой записи вам нужно иметь хотя бы базовое понимание HTML и JavaScript.
Основы
Давайте создадим новую папку, например webpack-first. Вы можете это сделать где угодно, я сделаю это в /var/www/.
$ mkdir webpack-first && cd webpack-first
Важно! Не называйте папку «webpack», иначе у вас будет выдавать ошибку, из-за конфликта имен. Поэтому в имени папки и присутствует «-first».
Пример ошибки:
npm ERR! code ENOSELF npm ERR! Refusing to install package with name "webpack" under a package npm ERR! also called "webpack". Did you name your project the same npm ERR! as the dependency you're installing? npm ERR! npm ERR! For more information, see: npm ERR! <https://docs.npmjs.com/cli/install#limitations-of-npms-install-algorithm>
Далее нужно инициализировать (создать) конфиг для работы с npm:
$ npm init -y
И используя npm установить webpack:
$ npm install --save-dev webpack
После установки у нас должна быть следующая структура внутри папки webpack-first:
|- package.json + |- index.html + |- /src + |- index.js
«+» — это файлы, которые нам нужно будет сейчас создать.
index.js:
function component() {
var element = document.createElement('div');
// Lodash на данные момент подключено через скрипт тэг, это обязательно, чтобы строка ниже работала как надо
element.innerHTML = _.join(['Привет', 'webpack'], ' ');
return element;
}
document.body.appendChild(component());
index.html:
<html>
<head>
<title>Основы</title>
<script src="https://unpkg.com/lodash@4.16.6"></script>
</head>
<body>
<script src="./src/index.js"></script>
</body>
</html>
В этом примере у нас зависимость между <script> тегами. Нам нужно подключить lodash (в head) скрипт, чтобы index.js работал без ошибок.
В такой архитектуре веб-приложения есть недостатки:
- не сразу понятно какой скрипт от чего зависит
- если скрипт будет удален в будущем, это испортит правильную работу веб-приложения
- если скрипт подключен, но нигде не используется, браузер все равно скачает его
Давайте теперь посмотрим, как webpack может помочь в решении проблем описанных выше.
Теперь можете открыть эту страницу в браузере (file:///var/www/webpack/index.html), вы должны увидеть следующую страницу:
Делаем правильно
Для начала нужно немного подправить структуру проекта. Разделить на источник (src) и то, что мы будет показывать пользователям (dist). В /src будет храниться исходный код, после завершения работы над проектом, все скрипты будут перенесены в dist, включая все нужные зависимости, но об этом чуть ниже.
|- package.json
+ |- /dist
+ |- index.html
- |- index.html
|- /src
|- index.js
Как видно из новой структуры выше, мы создали папку /dist и перенесли туда index.html.
Теперь чтобы завернуть lodash используя webpack, нужно установить локально:
$ npm install --save lodash
И теперь это можно импортировать в src/index.js:
import _ from 'lodash';
function component() {
var element = document.createElement('div');
// Lodash теперь имспортируется внутри скрипта
element.innerHTML = _.join(['Привет', 'webpack'], ' ');
return element;
}
document.body.appendChild(component());
Мы изменили 2 строки: 1 и 6. На первой строке импортируем lodash. А на 6 просто замени комментарий на более актуальный.
Ну и конечно же нужно зайти в dist/index.html и сделать соответствующие изменения.
Новая версия файл выглядит следующим образом:
<html>
<head>
<title>Основы</title>
</head>
<body>
<script src="bundle.js"></script>
</body>
</html>
Первое, я удалил lodash скрипт, который был в голове документа, потому что сейчас мы его импортируем внутри src/index.js.
Второе, я заменил src/index.js на bundle.js, потому что после работы webpack, мы будем генерировать новый JS файл, который будет называется bundle и автоматически перемещать его в папку с dist/index.html.
Теперь давайте сгенерируем bundle.js:
$ ./node_modules/.bin/webpack src/index.js dist/bundle.js
Думаю, что тут все понятно. Папка .bin используется для всех банарных библиотек в npm.
В итоге у вас должно выдать что-то похожее на это:
Asset Size Chunks Chunk Names
bundle.js 544 kB 0 [emitted] [big] main
[0] ./src/index.js 255 bytes {0} [built]
[2] (webpack)/buildin/global.js 488 bytes {0} [built]
[3] (webpack)/buildin/module.js 495 bytes {0} [built]
+ 1 hidden module
Теперь ваша страница будет выглядеть намного чище, зайдите на file:///var/www/webpack/dist/index.html и посмотрите сами:
Модульность
import и export стали стандартами в ES2015. В Webpack они используются для добавления нужных библиотек, как мы уже сделали с lodash выше.
Давайте создадим webpack.config.js Webpack конфиг. Назовем его webpack.config.js, теперь структура нашего проекта должна быть следующей:
|- package.json
+ |- webpack.config.js
|- /dist
|- index.html
|- /src
|- index.js
webpack.config.js:
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
entry— это откуда мы будем брать файл-источник для постройкиbundle.jsoutput— используется для того, чтобы сказатьwebpackкуда нужно закинуть построенный файл со всеми зависимостями. В данном случае — это будетbundle.jsфайл и поместить его нужно в dist папку.
Теперь построим проект заново, только уже использую конфиг:
$ ./node_modules/.bin/webpack --config webpack.config.js
Вам не кажется, что постоянно писать эту команды это слешком долго? Вот мне кажется, давайте все упростим, использую npm’ную script настройку в package.json:
В scripts секцию json добавьте данные о построение проекта следующий образом:
{
"name": "webpack-first",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^3.8.1"
},
"dependencies": {
"lodash": "^4.17.4"
}
}
Теперь запустим постройку проекта используя npm:
$ npm run build
