Конфигуриране на webpack

Следващата стъпка е да се създадем webpack.config.js файл. Там ще опишем настройките, така че webpack да свърши работата, която искаме.

Първото нещо, с което webpack конфигурацията започва е Вход (Entry). Това е описано и в официалния сайт на webpack: https://webpack.js.org/concepts/.

Entry

Тук ще опишем от къде трябва да започне webpack при обработка на кода ни.

За да опишем път до файловете от src/js и src/scss обаче първо трябва да заредим още един модул: path.

Напишете npm install path --save-dev в конзолата.

Сега вече в webpack.config.js можем да добавим следното съдържание:

const path = require('path');

module.exports = {
    entry: [
        path.resolve('./src/js/functions.js'),
        path.resolve('./src/scss/style.scss')
    ]
};

module.exports е синтаксис от ESNext, който прави публични описаните настройки, при зареждане от външен файл. Сега няма да задълбаваме точно какво значи това, а ще оставим темата за бъдещ урок.

В entry подаваме масив с пътища до стартови файлове за webpack. Имаме 2 — за JS и SCSS, които ще искаме да бъдат транспилирани.

Output

Следващата стъпка при конфигуриране на webpack е Изход (Output). Тук описваме точно къде да бъдат записани новите файлове, след транспилиране на входните.

Нека променим съдържанието на webpack.config.js на:

const path = require('path');

module.exports = {
    entry: [
        path.resolve('./src/js/functions.js'),
        path.resolve('./src/scss/style.scss')
    ],
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'functions.bundle.js'
    }
};

В output описваме папката и името само на bundle-натия JS файл. Името на CSS файла ще зададем по-късно, когато заредим и plugin, който да обработва SCSS. Webpack няма вградена поддръжка за SCSS, а само за JS bundling.

Пускане на webpack

За да накараме webpack да транспилира кода ни трябва да извикаме команда. Тя обаче първо трябва да се опише в нашия package.json файл.

В момента за scripts вероятно имате:

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1"
}

Изтрийте този "test" и добавете:

"scripts": {
  "dev": "webpack --mode=development"
}

scripts от package.json се пускат чрез: npm run <script_name>. Където <script_name> (без ъгловите скоби) е името на script-а, който сте дефинирали в package.json. Там можете да имате няколко дефинирани script-а.

Това означава, че в момента npm run dev ще ви изпълни webpack --mode=development в контекста на Node.JS и проекта си.

Защо не пишем направо webpack --mode=development в конзолата, а npm run dev?

Ключовото в предното обяснение е “в контекста на Node.JS и проекта си”. Ако нямате webpack инсталиран глобално, а само като dev-dependency в проекта, ще получите грешка, ако се опитате да изпълните директно webpack команда през конзолата.

Ако обаче имате глобално инсталиран webpack — това ще сработи.

Останалата част от комантада: --mode=development указва на webpack, че в момента сме в среда на разработка, а не краен сървър, което подава различна информация към webpack plugin-ите, които ще инсталираме после. На база на средата може да минифицираме или не JS кода си.

npm run dev

Пуснете го и вероятно ще видите съобщение, че за да работи webpack трябва да се инсталира и webpack-cli модул.

Напишете като отговор просто “yes” в конзолата и натиснете “Enter”. Това ще добави webpack-cli към dev dependencies

Като резултат трябва да видите новосъздаден файл с име functions.bundle.js в папка dist. Ако въведете някакъв код в style.scss обаче ще получите грешка, че webpack не може да го прочете. Това е поради факта, който споменах по-рано, че ще ни трябва модул за SCSS.