webpack-config-multiple-cpanel

---

Готовый webpack.config.js для работы с множественными web страницами. Control-panel для управления

Установка

В корне проекта должен лежать package.json

npm i

Возможности

---

Команда: "npm run start"

• HTML файлы формируется из pug
• CSS файл формируется из S(A|C)SS
• Разделение CSS от JS
• Включен мапинг (режим 'source-map')
• Можно импортировать файлы (png|jpg|svg|gif|ttf|woff|woff2|eot|svg)

Команда: "npm run build"

• Мапинг отключён
• Разделение кода ( chunks: 'all' )
• Копирование JS и CSS в отдельные папки
• Копирование отдельных папок
• Минимификация HTML, CSS, JS

Control panel

Настройки в шапке файла 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