Готовый webpack.config.js для работы с множественными web страницами. Control-panel для управления
В корне проекта должен лежать package.json
npm i
- HTML файлы формируется из pug
- CSS файл формируется из S(A|C)SS
- Разделение CSS от JS
- Включен мапинг (режим
'source-map'
) - Можно импортировать файлы (
png|jpg|svg|gif|ttf|woff|woff2|eot|svg
)
- Мапинг отключён
- Разделение кода (
chunks: 'all'
) - Копирование JS и CSS в отдельные папки
- Копирование отдельных папок
- Минимификация HTML, CSS, JS
Настройки в шапке файла webpack.config.js
globInputPath:
- установка основного каталога файлов проекта где хранятся все точки входа.
globInputPath: 'src'
entryPointsPath:
- Список HTML страниц (точки входа - в одну точку входят обязательно index.js файл и index.pug файл).
entryPointsPath: []
Синтаксис записи: [ ['имя_входной_точки'], ['относительный_путь_к_входным_файлам'] ]
Указывается только каталог (относительно globInputPath
) в котором должны находиться index.pug и index.js конкретной страницы.
ПРИМЕР:
[ ['home'], ['project/home'] ],
[ ['about'], ['project/about'] ],
По данным путям должны лежать файлы index.pug и index.js. Эти файлы будут переименованы в имя точки. В готовый [имя_точки].html будут автоматически импортированы [имя_точки].js и [имя_точки].css
entryPointsDevelopment:
- имя точки которую будет запускать dev-server в режиме разработки. По умолчанию запускается первая в списке точка.
entryPointsDevelopment: ''
alias:
- Альясы. Переменные для путей. Абсолютный путь задается автоматически. Устанавливать относительный путь (относительно globInputPath
).
Используется для понятной записи в import вместо "./../../../" пишется @вашаПеременная
примеры записей:
'@myMenu': 'src/project/Blocks/menu',
'@paginationBlock': 'src/project/Blocks/pagination'
chunks:
- Опция позволяет выделять скрипты которые подключаются на нескольких страницах в отдельный файл JS.
true
- выделять в отдельный файл, если false
- не выделять, все упаковывать в один файл JS.
port: 8080
- порт для dev-derver`а. По умолчанию 8080.
open: true
- dev-server автоматически запустить браузер со страницы-точки указанной в entryPointsDevelopment
в режиме разработки.
warnings:
- отображать предупреждение js кода на странице.
true
- отображать, false
- игнорировать
errors:
- отображать ошибки js кода на странице.
true
- отображать, false
- игнорировать
exitPointsPath:
- основной каталог куда будут экспортироваться все обработанные файлы (HTML, CSS, JS) проекта.
exitPointsJs:
- основной каталог куда будут экспортироваться все файлы JS (относительно exitPointsPath
)
exitPointsCss:
- основной каталог куда будут экспортироваться все файлы CSS (относительно exitPointsPath
)
copyListData: []
- список каталогов/файлов для копирования из исходников в итоговую сборку. Например картинки и шрифты.
Синтаксис:
[ ['откуда_путь___относительно_globInputPath'], ['куда_путь___относительно_exitPointsPath'] ], [ ['еще_откуда_путь___относительно_globInputPath'], ['еще_куда_путь___относительно_exitPointsPath'] ]
Пример:
[ ['home/block/img'], ['img'] ],
[ ['home/block/fonts'], ['fonts'] ],
{
"devDependencies": {
"clean-webpack-plugin": "^3.0.0",
"copy-webpack-plugin": "^5.1.1",
"cross-env": "^7.0.2",
"css-loader": "^3.4.2",
"file-loader": "^5.1.0",
"html-webpack-plugin": "^3.2.0",
"mini-css-extract-plugin": "^0.9.0",
"node-sass": "^4.13.1",
"pug": "^2.0.4",
"pug-loader": "^2.4.0",
"sass-loader": "^8.0.2",
"terser-webpack-plugin": "^2.3.5",
"webpack": "^4.41.6",
"webpack-cli": "^3.3.11",
"webpack-dev-server": "^3.10.3"
},
"dependencies": {
"jquery": "^3.4.1"
}
}
MIT © Aleksandr-Nevs