webpack 之 HMR (Módulo de reemplazo caliente)

HMR

¿Cuál es el HMR?

Reemplazo del módulo caliente (HMR), al modificar el código y guardar, webpack el código será empaquetado de nuevo y se envía al módulo de navegador, el navegador antiguo módulo reemplazado por un nuevo módulo,
por lo que no actualizar su navegador la aplicación puede actualizarse bajo la premisa. HMR- módulo caliente reemplazar la función sustituye a la aplicación se está ejecutando, añadir o quitar módulos sin tener que recargar la página entera.

HMR cómo funciona?

1. Modificar uno o más archivos
2. sistema de archivos para aceptar los cambios y notificar webpack
3. webpack recompiladas a uno o más módulos de construcción, y notificar al servidor de HMR se ha actualizado
4. HMR Server mediante websockets cuenta HMR tiempo de ejecución necesita ser actualizado (HMR solicitar estas actualizaciones a través de los protocolos HTTP en tiempo de ejecución)
5. HMR módulo de actualización en tiempo de ejecución alternativa. Estos módulos no pueden actualizarse si se determina, a continuación, desencadenar toda la actualización de la página

HMR flujo de trabajo diagrama

La cifra es webpack webpack-dev-servidor con un desarrollo de la aplicación de calor diagrama de flujo de actualización del módulo

• La figura inferior de la caja es un control rojo región código webpack. caja azul es un control de área webpack-dev-servidor de código, el bloque de sistema de archivos magenta, cambie la modificación del archivo se produce
  en este, y la aplicación en sí es el bloque cian, la etapa de analizar
• El primer paso, en el modo de reloj webpack, webpack tocar un sistema de archivo es modificado, webpack supervisa los cambios de archivo, re-compilado módulo de paquete de acuerdo con el archivo de configuración, y el código es un simple paquete
  para ahorrar memoria de los objetos JavaScript
• El segundo paso es la interacción de la interfaz entre wbepack-dev-servidor y webpack, y en este paso, principalmente la interacción entre el middleware dev-servidor webpack-dev-middleware y webpack, webpack-dev-middleware exposición llamada webpack el código API
  monitor de cambio y webpack dicho, empaquetar el código en la memoria
• El tercer paso es un webpack-dev-servidor para el seguimiento de cambios en los archivos, este paso es diferente del primer paso, no los cambios en el código del monitor empaquetados de nuevo. Cuando configuramos devServer.watchContentBase es cierto cuando estos cambios van a escuchar los archivos estáticos de archivo de configuración del servidor en el archivo de configuración, los cambios
  serán notificados para recargar vivo las aplicaciones de navegador. Señalar aquí que la actualización del navegador, y HMR son dos conceptos.
• El cuarto paso es el código webpack-dev-servidor de trabajo, este paso se establece principalmente a través de sockjs (dependiente webpack-dev-servidor de) entre el navegador y el servidor WebSocket un enlace a larga, las diversas etapas de la webpack paquete de compilador información de estado indica al lado del navegador,
  sino que también incluye el tercer paso escuchas servidor estático sistema de archivos cambio de información. Navegador funciona de forma diferente según la toma de estos mensajes, por supuesto, lo más importante información del servidor valor hash o la entrega del nuevo módulo. Los pasos subsiguientes para reemplazar un módulo de acuerdo con este calor valor hash
• webpack-dev-servidor / cliente de terminal no es capaz de solicitar código actualizado, el módulo no realiza operaciones de más calor, y estos a su vez a un webpack trabajo, webpack trabajo / caliente / dev-servidor está en conformidad con webpack-dev- información del servidor / cliente pasó a él
  y dev-servidores de conjunto de drama de configuración de actualizar su navegador seguiría siendo módulo de actualización caliente. Por supuesto, aunque sólo sea para actualizar el navegador, no copia de seguridad de esos pasos,
• presentación del cliente HMR HotModuleReplacement.runtime, que recibe el valor hash transmitido en el paso anterior a su nuevo módulo, a través del cual el JsonpMainTemplate.runtime
  Ajax pide al lado del servidor, el servidor devuelve un JSON, que contiene toda JSON ser actualizado el valor hash del módulo, después de obtener la lista de actualizaciones, el módulo de nuevo por la petición jsonp obtener el último código del módulo. Este paso es 7/8/9
• Y hermano del paso 10 es para determinar el éxito de HMR paso clave en este paso, HotModulePlugin comparará los viejos y nuevos módulos para determinar si el módulo de actualización, después de la determinación de un módulo de actualización, verificación dependencias entre módulos, el módulo actualiza
  la ya que las referencias al módulo de actualización entre colegas
• El paso final, cuando el HMMR falla, caen de nuevo a la operación de recarga en vivo, que se despierta de actualización del navegador para obtener los últimos códigos de paquete

HMR y la diferencia LiveReload?
LiveReload es una ayuda para el desarrollo web, cuando terminamos la modificación de HTML, CSS y JS tiempo se actualizará automáticamente el navegador no es necesario en el F5. Así diferencia LiveReload y HMR Lo que lo hace hacer, LiveReload en tiempo real actualizar la página entera, mientras que HMR es un módulo de actualización se ha cambiado sin tener que recargar la página

NamedModulesPlugin

new webpack.NameModulesPlugin(),

Al abrir HMR cuando se utiliza el plug-in mostrará la ruta relativa al módulo, se recomienda para entornos de desarrollo

HotModuleReplacementPlugin

El efecto de módulo de conexión en caliente se implementa Alternativamente, cuando la cinta se inicia realmente --hotparámetros, cambiará el tapón de inyección

new webpack.HotModuleReplacementPlugin()

Un ejemplo sencillo de HMR corriendo

• directorio de archivos de la siguiente manera

• hello.js sigue

const hello = () => "hello world";
//const hello = () => "hello eleme";
export default{
    hello
}

• index.js sigue

import hello from "./hello.js";
import "./style.css"
function component(){
    var element = document.createElement("div");
    element.innerHTML = hello.hello();
    return element
}
console.log(hello.hello())
document.body.appendChild(component());
console.log(module)
if(module.hot){
    module.hot.accept("./hello.js",function(){
        console.log("accepting the updated printMe module",hello.hello());
    })
}

• style.css sigue

body{
    /*background-color: blue;*/
    background-color: black;
    color: #fff;
}

• webpack.hmr.js

const path = require("path");
const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const {CleanWebpackPlugin} = require("clean-webpack-plugin")
module.exports = {
    entry:path.resolve(__dirname,"src/index.js"),
    output:{
        filename:"bundle.js",
        path:path.resolve(__dirname,"dist")
    },
    module:{
        rules:[
            {
                test:/\.css$/,
                use:['style-loader','css-loader']
            }
        ]
    },
    plugins:[
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            title:"HMR"
        }),
        new webpack.NamedModulesPlugin(),
        new webpack.HotModuleReplacementPlugin()
    ],
    devtool:"inline-source-map",
    devServer:{
        contentBase:"./dist",
        hot:true,
        inline:true
    }
}

• package.json

{
  "name": "webpackDevServer",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --config demo/webpack-dev-server/webpack-dev-server.js",
    "server": "node demo/webpack-dev-middleware/server.js",
    "hmr": "webpack-dev-server  --config demo/HMR/webpack.hmr.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "clean-webpack-plugin": "3.0.0",
    "css-loader": "3.2.0",
    "express": "4.17.1",
    "html-webpack-plugin": "3.2.0",
    "style-loader": "1.0.0",
    "webpack": "4.41.2",
    "webpack-cli": "3.3.9",
    "webpack-dev-middleware": "3.7.2",
    "webpack-dev-server": "3.8.2"
  }
}

• Ejecución NPM plazo HMR

Los resultados son como sigue

Usted ve, el tema del cambio hello.js cuando, sin actualizar la página automáticamente a cambiar, modificar el contenido style.css, fondo de la página de cambio de color también se siguió en