Посмотрите в этом посте пошаговую инструкцию, необходимую для настройки Sass & Pug.js (ранее известного как JADE) в Webpack 5 с полностью работающим HMR.
👨🏻💻 Инициализируйте ваш проект с Webpack 5:
1- Создайте package.json для вашего проекта:
2- Установите webpack вместе с его CLI и dev-сервером:
/* ☝🏽 The -D flag install these as a devDependency.
Since webpack already compiles & bundle our app for build. */
🎨 Настройка Sass & Pug.js на Webpack:
1- Установите необходимые зависимости Sass:
2- Установите необходимые зависимости Pug:
3- С помощью ‘pug-plugin’ вы можете вставлять ваши изображения, стили, шрифты и скрипты в любой файл pug. Просто используйте «require()» перед href или src-путем:
4- Чтобы все это работало, создайте файл «webpack.config.js» в корне вашего проекта, & добавьте в него следующие настройки:
//webpack.config.js
const path = require('path');
const PugPlugin = require('pug-plugin');
module.exports = {
entry: {
index: './src/views/index.pug',
about: './src/views/about.pug'
//☝🏽 Insert your PUG HTML files here
},
output: {
path: path.join(__dirname, 'dist/'),
publicPath: '/',
filename: 'assets/js/[name].[contenthash:8].js'
//☝🏽 Output filename of files with hash for unique id
},
plugins: [
new PugPlugin({
pretty: true,
//☝🏽 Format HTML (only in dev mode)
extractCss: {
filename: 'assets/css/[name].[contenthash:8].css'
}
})
],
module: {
rules: [
{
test: /.pug$/,
loader: PugPlugin.loader
//☝🏽 Load Pug files
},
{
test: /.(css|sass|scss)$/,
use: ['css-loader', 'sass-loader']
//☝🏽 Load Sass files
},
{
// To use images on pug files:
test: /.(png|jpg|jpeg|ico)/,
type: 'asset/resource',
generator: {
filename: 'assets/img/[name].[hash:8][ext]'
}
},
{
// To use fonts on pug files:
test: /.(woff|woff2|eot|ttf|otf|svg)$/i,
type: 'asset/resource',
generator: {
filename: 'assets/fonts/[name][ext][query]'
}
}
]
},
devServer: {
static: {
directory: path.join(__dirname, 'dist')
},
watchFiles: {
paths: ['src/**/*.*', 'assets/scss/**/*.*'],
//☝🏽 Enables HMR in these folders
options: {
usePolling: true
}
}
},
stats: 'errors-only'
//☝🏽 For a cleaner dev-server run
};
5- Добавьте ваши файлы Pug на входе (внутри module.exports) & вы готовы к работе! (вы можете добавить больше файлов позже). 🎆 HMR будет работать для любого Pug, который импортирует хотя бы 1 Js файл, & все Sass файлы в папке ‘src’ или ‘assets’❗ 🙌🏼
📚 И последнее, но не менее важное:
Вы можете настроить свой webpack.config.js и удалить или вставить все, что вам нравится. Приведенный здесь код основан на инструкциях pug-plugin.