Для установки и настройки сборки pug+webpack на операционных системах Linux и Windows, следуйте инструкциям ниже:
1. Установите Node.js на вашу операционную систему, скачав его с официального сайта Node.js.
2. Создайте новую папку для проекта и перейдите в нее через командную строку.
3. В командной строке выполните следующую команду, чтобы инициализировать новый проект и создать файл package.json:
```
npm init -y
```
4. Установите необходимые пакеты для сборки pug и webpack, введя следующие команды в командной строке:
```
npm install pug pug-loader webpack webpack-cli --save-dev
```
5. Создайте файл webpack.config.js в корневой папке проекта и настройте его следующим образом:
```javascript
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.pug$/,
use: ['pug-loader']
}
]
}
};
```
6. Создайте папки src и dist в корневой папке проекта. В папке src создайте файл index.pug с вашими шаблонами Pug.
7. В файле package.json добавьте скрипты для сборки проекта:
```json
"scripts": {
"build": "webpack"
}
```
Теперь, чтобы собрать проект, выполните команду `npm run build` в командной строке.
Чтобы исправить проблему с символом "%5С" на Windows, вам необходимо использовать правильные разделители пути в конфигурации Webpack. Вместо использования обратного слеша (\\), используйте прямой слеш (/) в путях к файлам стилей и скриптов в вашем коде:
```javascript
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.pug$/,
use: ['pug-loader']
}
]
},
resolve: {
extensions: ['.js'],
alias: {
styles: path.resolve(__dirname, 'src/styles/')
// И добавьте другие пути к файлам стилей и скриптов
}
}
};
```
Теперь Webpack будет использовать правильные разделители пути при подключении стилей и скриптов в вашем HTML-коде, и проблема с символом "%5С" должна быть исправлена.
