Live server для разработки фронта

Рассматриваем несколько серверов для верстки

Five Server

Простой и легко настраиваемый сервер у которого при этом есть и плагин для visual studeo code. Единственный минус в том что я не нашел как интегрировать сборку webpack.

npm init -y
npm -g i five-server

далее создаем файл .fiveserverrc

{
  "port": 8085,
  "root": "src/html",
  "open": "index.html"
}

в package.json в секции scripts прописываем

  "scripts": {
    "dev": "five-server"
  },

Выполняем npm run dev и у нас запускается сервер на localhoat:8085

Теперь добавим плагин в visual studeo code.
Для этого в поиске плагина найдем и установим «Live Server (Five Server)».
В статус баре появился кнопка «Go Live» при нажатие на который запустится сервер.

А так же доступен вызов через контекстное меню «Open with Five Server». И откроется выбранный вами файл.

Webpack-dev-server

Сервер разработчика в который встроен webpack
Вот тут подробное описание конфигурационного файла для web-dev-server на английском.
Вот тут статья по настройке webpack уже на русском. Есть несколько строк и про dev режим

npm init -y
npm install webpack-dev-server --save-dev
npm install webpack-cli  --save-dev

в package.json в секции scripts прописываем

  "scripts": {
    "dev": "webpack serve --mode development",
    "build": "webpack --mode production"
  },

У нас следующая структуры каталогов

  • src — каталог с исходниками
  • assets — каталог для скомпилированного пути
  • public — каталог для html который рендерит dev сервер

Вот минимальные настройки для webpack.config.js

const path = require('path')

module.exports = {
    entry: {
        main: path.resolve(__dirname, './src/js/main.js'),
    },
    output: {
        path: path.resolve(__dirname, './assets'),
        filename: '[name].bundle.js',
        publicPath: '/assets',
    },
}

publicPath — это путь по которому будет доступен ваш собранный js скрипт. В нашем случае в public\index.html вы должны прописать

<script src="/assets/main.bundle.js"></script>

Теперь запускаем на dev сервер через команду npm run dev и видим url по которому будет доступен наш index.html

хочу заметить что dev сервер не собирает каждый раз main.bundle.js в каталог assets. Он отдает файл динамически. Для того что бы собрать файл физически надо выполнить команду npm run build

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *