Предварительные требования. Убедитесь, что вы понимаете основы использования TypeScript с Webpack. Для этого Вы можете прочитать мой последний урок здесь. 👈

Горячая замена модулей (HMR) заменяет, добавляет или удаляет модули во время работы приложения без полной перезагрузки. Это может значительно ускорить разработку.

Вы также можете прочитать официальное руководство по адресу https://webpack.js.org/guides/hot-module-replacement/, но оно может быть немного нечетким. Моя статья более ясна и прямолинейна!

Давайте продолжим с того места, где мы остановились

На данный момент, если вы хотите, чтобы ваше приложение работало с обновленным кодом в вашем браузере, вам необходимо

  1. Скомпилируйте код, также известный как npm run build
  2. А затем нажмите кнопку обновления в браузере

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

Так как же обновить нашу среду разработки?

В чудесном мире Webpack это на удивление просто. Давайте поблагодарим Тобиаса Копперса, автора Webpack.



sokra — Обзор
Арктический участник хранилища кода Закрыть Зарегистрируйтесь, чтобы создать свой профиль на GitHub, лучшем месте для размещения кода, управления…github.com



Задача 1: Как использовать плагин copy-webpack?

Вам нужно иметь файл index.html в папке сборки. Для этого мы можем использовать copy-webpack-plugin. Подробнее об этом можно прочитать на странице webpack.js.org/copy-webpack-plugin

npm run install --save-dev copy-webpack-plugin

Обновите файл конфигурации вашего веб-пакета

//webpack.config.dev.js
...
const CopyPlugin = require('copy-webpack-plugin');

module.exports = {
  ...
  plugins: [
    new CopyPlugin({
      patterns: [
        {from: 'public'}
      ]
    })
  ],
  ...
}

Предыдущий фрагмент кода копирует все ваши файлы из папки /public в место назначения для вывода.

Это означает, что после сборки убедитесь, что у вас есть правильный путь к bundle.js в вашем index.html относительно нового местоположения .html.

// /public/index.html
...
<body>
...
<script src="./bundle.js"></script>
</body>
...

Примечание: также можно использовать html-webpack-plugin, но мы не будем использовать его в этом уроке.

Убедитесь, что у вас естьbuild скрипт вpackage.json

"scripts": {
  ...
  "build": "webpack --config webpack.dev.config.js",
  ...
},

Теперь, если вы выполните npm run build, он должен создать папку /dist с содержимым:

Если у вас есть какие-либо вопросы, свяжитесь со мной в twitter/@codegodzilla

Теперь вы знаете, как использовать copy-webpack-plugin, что является важным навыком в веб-разработке на JavaScript!

Продолжим задание 2.

Задача 2: Как использовать webpack devServer?

Мы реализуем горячую перезагрузку с помощью webpack-dev-server



Сервер разработки | webpack
webpack-dev-server можно использовать для быстрой разработки приложения. См. руководство по разработке, чтобы начать работу. Эта страница…webpack.js.org



1. Установить зависимость

npm run install --save-dev webpack-dev-server

2. Обновите файл конфигурации

// webpack.dev.config.js
...
module.exports = {
  ...
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    port: 9002,
  }
}

3. Добавить новый скрипт

// package.json
"scripts": {
  ...
  "start:dev": "webpack-dev-server --open --config webpack.dev.config.js"
},

4. Убедитесь, что значение resolve.extensions верное. У вас должен быть включен “.js”, иначе webpack-dev-server не сможет найти модули.

//webpack.dev.config.js
...
resolve: {
  extensions: ['.ts', ".js"],
},
...

5. Выполнить npm run start:dev

Он должен открыть браузер с вашим index.html, который ссылается на ваш bundle.js.

6. Проверьте, работает ли горячая перезагрузка, для этого измените некоторый код в папке/src, нажмите «Сохранить» —> веб-пакет должен перезагрузить ваш сайт.

Поздравляем, теперь вы знаете основы горячей замены модулей с помощью Webpack. 🚀

Как использовать React, TypeScript с Webpack?

Для этого вам нужно прочитать мой следующий урок, загляните на мой сайт www.codegodzilla.com

Вы также можете найти меня в Твиттере по адресу https://twitter.com/codegodzilla.

И мой канал на Youtube: Youtube API Developer CodeGodzilla

Удачи 🍀