Путь изучения webpack (2) webpack-dev-server реализует горячее обновление

Webpack

последняя глава справаwebpackКонфигурация имеет простое понимание.

В этой главе мне нужно научитьсяwebpackГорячее обновление, потому что в процессе разработки вы не хотите, чтобы человеческая плоть компилировала файл и обновляла браузер при изменении файла.

WebPack Hot Update

автоматическое обновление webpack-dev-сервера

webpack-dev-serverпредоставляет вам простойwebсервер, и может перезагружаться в режиме реального времени (live reloading).

Сделайте это на практике.

Сначала создадим проект

mkdir dev-erver && cd dev-server
npm init -y // 快速创建一个项目配置
npm i webpack webpack-dev-server webpack-cli --save-dev
mkdir src // 创建资源目录
mkdir dist // 输出目录
touch webpack.dev.js // 因为是在开发环境需要热更新，所以直接创建dev配置文件

Сначала напишите файл конфигурации, мы просто напишем конфигурацию с несколькими входами.

'use strict';

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'index.js'
  },
  mode: 'development',
  devServer: {
    contentBase: path.resolve(__dirname, 'dist')
  }
};

тогда мы идемsrcСоздавайте файлы, записывайте контент

index.js

'use strict'

document.write('hello world~')

Готово, мы можем начатьwebpack-dev-server,существуетpackage.jsonдобавить команду в

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
+   "dev": "webpack-dev-server --config webpack.dev.js --open"
  },

запустить его

npm run dev

Мы видим, что файл был запакован, но вdistФайлов в каталоге не видно, потому чтоWDSЭто положить скомпилированный файл в кеш, на диске нет IO, но мы можем получить к нему доступ

http://localhost:8080

настроить уведомлениеwebpack-dev-server,существуетlocalhost:8080создать сервис подdistФайлы в каталоге, как доступные файлы, поэтому мы можем войти напрямуюbundle.jsпросмотр адреса

http://localhost:8080/index.js

Очевидно, мы хотим видеть эффект, а не упакованный код, поэтому мыdistсоздать каталогhtmlфайл можно импортировать

index.html

<script src="./index.js"></script>

На этот раз мы посещаем

http://localhost:8080

Контент отсутствует, мы изменим его в следующий разindex.jsфайл, чтобы увидеть, может ли он быть автоматически обновлен

'use strict'

document.write('hello world~byebye world')

Веб-сервер автоматически перезагрузит скомпилированный код

Это обновление действительно горячее, но это каждый раз, когда изменения будут обновлять всю страницу, вы можете открыть консольный вид.

Очевидно, что это все еще не устраивает необходимости.

webpack-dev-server с HotModuleReplacementPlugin для обеспечения горячего обновления

Что нам нужно, так это обновить измененный модуль, но не обновить страницу. В это время необходимо использоватьГорячая замена модуля.

Горячая замена модуля (Hot Module ReplacementилиHMR)ДаwebpackПредусмотрена одна из самых полезных функций. Это позволяет обновлять различные модули во время выполнения без необходимости полного обновления.

характеристика:

Горячая замена модуля (HMR - Hot Module Replacement) заменяет, добавляет или удаляет модули во время работы приложения без перезагрузки всей страницы. Скорость разработки существенно ускоряется в основном следующими способами:

  • Сохранение состояния приложения, которое теряется при полной перезагрузке страницы.
  • Обновляйте только изменения, чтобы сэкономить драгоценное время разработки.
  • Настройка стилей выполняется быстрее — почти эквивалентно изменению стилей в отладчике браузера.

включить

Включить HMR на самом деле очень просто, измените егоwebpack-dev-serverнастройка и использованиеwebpackПодойдет встроенный плагин HMR.

'use strict';

    const path = require('path');
+   const webpack = require('webpack');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'index.js'
  },
  mode: 'development',
  devServer: {
    contentBase: path.resolve(__dirname, 'dist'),
+   hot: true
  },
  module: {
    rules: [
      {
        test: /\.(html)$/,
        use: {
          loader: 'html-loader'
        }
      }
    ]
  },
+ plugins: [
+   new webpack.HotModuleReplacementPlugin()
+ ]
};

Давайте изменим файл, чтобы сформировать ссылочное отношение

index.js

'use strict'
import { test } from './page1.js'
document.write('hello world~1234')

test()

page1.js

'use strict'

module.exports = {
  test: function () {
    console.log(11123456)
  }
}

на странице входаindex.jsдобавить еще один абзац

if (module.hot) {
  module.hot.accept();
}

ОК, затем выполнить

npm run dev

Затем модифицируем page1.js, и обнаружим, что страница не обновляется, а обновляются только некоторые файлы

Итак, наше горячее обновление выполнено.

принцип

Мы можем упростить весь процесс,Webpack CompileПередача файла пакета вBundle Server,Bundle ServerЭто сервер, который затем будет выполнять эти скомпилированные файлы, чтобы браузер мог получить к ним доступ. Когда файл изменится,Webpack CompileПосле компиляции вы получите уведомлениеHMR Server,HMR Serverуведомит браузерHMR Runtimeвносить изменения.

HMR Runtimeбудет упакован в скомпилированный файл js, а затем объединен сHMR ServerУстановите отношения связи через веб-сокет, чтобы вы могли обновлять и изменять в режиме реального времени.

ссылка на статью

Webpack Learning Road (5) Введение в загрузчики и распространенные загрузчики

Путь изучения webpack (4) webpack-hot-middleware реализует горячее обновление

Путь изучения веб-пакетов (3) webpack-dev-middleware

Webpack Learning Road (1) Базовая конфигурация

I am moving forward.

Категории