Сервер разработки Webpack

Так что же такое сервер webpack dev?
Webpack dev server - это веб-сервер, основанный на express.

Чтобы вам не приходилось раскручивать другие серверы, такие как node, чтобы увидеть ваш проект локально, сервер webpack dev предоставляет вам номер порта, по которому вы можете увидеть или протестировать свой проект в браузере локально.

Когда вы запускаете сервер webpack dev, webpack dev server вместо создания связанного файла (например, bundle.js) в папке dist создает связанный файл в памяти. Затем он передает эту информацию express, а затем express создает соединение с веб-сокетом, чтобы отобразить его в браузере на определенном порту №. Таким образом, вы не можете увидеть файл index.html или bundle.js в папке dist, поскольку он находится в памяти.

Какие бы изменения вы ни внесли в входной файл, они будут помещены в память и отображены в браузере сервером разработки.

Давайте настроим тестовый проект, чтобы увидеть Webpack Dev Server в действии. Создадим следующие файлы:

mkdir webpack-app
cd webpack-app
npm init --yes
npm i -D webpack webpack-cli babel-loader @babel/core
mkdir src dist
touch webpack.config.js src/index.js

Давайте добавим функцию для создания элемента кнопки и добавим ее в тело в src/index.js

// src/index.js
const displayName = () => {
   console.log( 'Test' );
   const button = document.createElement( 'button' );
   button.textContent = 'Click me';
   document.body.appendChild( button )
};

displayName();

Установите Webpack Dev Server

Установим webpack dev server, html-webpack-plugin и path. Флаг -D сохранит пакеты как вашу зависимость.

npm i -D webpack-dev-server html-webpack-plugin path

Плагин html-webpack-plugin сгенерирует для вас файл HTML5, который включает в себя все ваши пакеты веб-пакетов в теле с помощью тегов script.

Теперь добавьте эти конфигурации в свой webpack.config.js file

// webpack.config.js
const HtmlWebPackPlugin = require( 'html-webpack-plugin' );
const path = require( 'path' );
module.exports = {
   context: __dirname,
   entry: './src/index.js',
   output: {
      path: path.resolve( __dirname, 'dist' ),
      filename: 'main.js',
   },

   plugins: [
      new HtmlWebPackPlugin()
   ]
};

Теперь добавьте webpack-dev-server к скриптам в вашем файле package.json.

"scripts": {
 "webpack-dev-server": "webpack-dev-server",
    "dev": "webpack-dev-server --mode=development",
    "prod": "webpack --mode=production"
  },

Обратите внимание, что мы также добавили webpack-dev-server в dev, так что когда мы запускаем npm run dev, он автоматически запускает сервер webpack dev в режиме наблюдения. Таким образом, вам не нужно передавать — watch флаг в вашем скрипте.

Запустите сервер разработки Webpack

Теперь запустите npm run dev. Это запустит сервер разработки веб-пакетов на http://localhost:8080/ и отобразит файл index.html, сохраненный в памяти.

Поскольку мы используем html-weback-plugin, он создаст файл index.html и включит связанный файл main.js в теги сценария. Если вы запустите npm run dev, он не будет отображаться в dist каталоге, потому что сервер разработки webpack сохраняет файлы index.html и bundle.js в памяти.

Если вы хотите просмотреть эти файлы, вам нужно будет запустить webpack, а не webpack-dev-server.

Чтобы визуализировать файлы, созданные html-webpack-plugin, запустите npm run prod. Это потому, что сценарий prod запускает webpack, html-webpack-plugin создаст index.html файл в каталоге dist, а webpack создаст файл main.js в каталоге dist.

Для получения дополнительной информации вы можете посмотреть обучающее видео.