Webpack модули
Макар и webpack да може да bundle-ва JS файлове, не може по подразбиране да транспилира ESNext към JS. За целта също трябва да инсталираме модули.
Нека инсталираме:
npm install @babel/core @babel/preset-env babel-loader --save-dev
При инсталиране на зависимости можем да изредим имената на няколко разделени с интервал.
Така по-горе инсталираме едновременно:
@babel/core
@babel/preset-env
babel-loader
Зареждане на babel модул в webpack
Сега нека добавим следното в 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'
},
module: {
rules: [
{
exclude: /node_modules/,
test: /\.js$/,
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
compact: true
}
}
]
}
};
За модулите задаваме rules
, което е масив с правила кой файл как да се обработва.
За exclude
задаваме webpack
да игнорира папката /node_modules/
, тъй като там има много файлове и може да забавят изпълнението.
За test
трябва с регулярен израз да опишем имена на файлове, които webpack
да зареди. В случая изразът, който сме описали е за файлове, чието име завършва с “.js”.
Loader-ите за webpack са важна част, която позволяват на webpack да “прочете” съдържанието на файловете. Така той може да направи нужните обработки.
Като опции в момента задаваме babel да зареди стандартни настройки от модула @babel/preset-env
. Те зависят от средата (development или production). Тази среда е пряко свързана с dev
командата, която дефинирахме в package.json
. Спомнете си, че там в момента имахме --mode=development
.
Зареждане на SCSS модул в webpack
Идва ред и на SCSS.
Първо нека инсталираме:
npm install mini-css-extract-plugin css-loader sass-loader node-sass --save-dev
По принцип само css-loader
ще позволи на webpack да чете CSS файлове. Допълнително са ни нужни и sass-loader
и node-sass
за да може той да обработи специфичния синтаксис на SASS и SCSS.
До тук webpack ще може да включи нашите стилове. Той ще ги превърне в JS и ще ги добави във functions.bundle.js
.
Защо ни е mini-css-extract-plugin
Този plugin позволява CSS-а ни да не иде в JS-а, а да си остане в отделни CSS файлове.
Но така ще имаме 1 файл за зареждане повече! Нали правим bundle за да намалим броя заявки към сървъра?
1 или 2 заявки само по себе си не е чак такъв проблем.
Аз обаче предпочитам хора с изключен JS на компютъра си да могат все пак да заредят CSS-а. Ако той е включен в functions.bundle.js
, тогава сайтът ни ще е гол HTML без никакви стилове. Това лично на мене не ми харесва.
Добавяне на SCSS модула в webpack.config.js
Нека редактираме файла си, така че да имаме:
const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
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'
},
module: {
rules: [
{
exclude: /node_modules/,
test: /\.js$/,
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
compact: true
}
},
{
exclude: /node_modules/,
test: /\.scss$/,
use: [
{
loader: MiniCssExtractPlugin.loader
},
{
loader: 'css-loader'
},
{
loader: 'sass-loader'
}
]
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename: 'style.bundle.css'
})
]
};
Като цяло настройките са аналогични. Отново изключваме node_modules
и задаваме с test
зареждане на .scss
файлове.
Този път обаче ни трябват няколко loader-а. Затова подаваме use
, който е масив от loader
-и.
Накрая обаче трябва да инстанцираме самия MiniCssExtractPlugin
plugin и да зададем име на файла, където ще записваме информацията.
Сега вече при изпълнение на npm run dev
ще генерираме dist/functions.bundle.js
и dist/style.bundle.css
.