webpack => Reemplazo de módulo caliente

Observaciones

webpack-hot-middleware

Use con webpack-dev-middleware , agregando webpack-hot-middleware/client a la entrada.

Config

Añadir configuraciones como cadena de consulta a la ruta. Ejemplo:

webpack-hot-middleware/client?path=/__what&timeout=2000&overlay=false

Opción	Descripción
camino	La ruta en la que el middleware está sirviendo el flujo de eventos
se acabó el tiempo	El tiempo de espera después de una desconexión antes de intentar reconectarse
cubrir	Establézcalo en falso para deshabilitar la superposición del lado del cliente basada en DOM.
recargar	Establézcalo en verdadero para volver a cargar automáticamente la página cuando el paquete web se atasque.
sin información	Establézcalo en verdadero para deshabilitar el registro de la consola informativa.
tranquilo	Establézcalo en verdadero para deshabilitar todo el registro de la consola.
dynamicPublicPath	Establézcalo en verdadero para usar webpack publicPath como prefijo de ruta. (Podemos establecer `__webpack_public_path__` dinámicamente en tiempo de ejecución en el punto de entrada, vea la nota de `output.publicPath` )

Usar con webpack-dev-middleware

Instalar webpack-dev-middleware a través de npm

npm i -D webpack-dev-middleware webpack-hot-middleware

Modificar webpack.config.js

Agregue webpack-hot-middleware/client a cada elemento definido en "entry"

Añadir new webpack.HotModuleReplacementPlugin() a "plugins"

module.exports = {
    entry: {
        js: [
            './index.js',
            'webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000&reload=true'
        ]
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin()
    ]
};

Añadir estos a index.js

var webpack = require('webpack');
var webpackDevMiddleware = require('webpack-dev-middleware');
var webpackHotMiddleware = require('webpack-hot-middleware');

var config = require('./webpack.config.js');
var compiler = webpack(config);

app.use(webpackDevMiddleware(compiler, {
    noInfo: true,
    publicPath: config.output.publicPath,
    stats: { colors: true },
    watchOptions: {
        aggregateTimeout: 300,
        poll: true
    },
}));

app.use(webpackHotMiddleware(compiler, {
    log: console.log,
}));

Habilitar HMR para el módulo

Para hacer que un módulo sea elegible para el Reemplazo de Módulo en Caliente (HMR), la forma más sencilla es agregar module.hot.accept() dentro del módulo, de esta manera:

// ...

if(module.hot) {
    module.hot.accept(); // This will make current module replaceable
}

Usar con webpack-dev-server

Instalar webpack-dev-server a través de npm.
```
npm i -D webpack-dev-server
```

Configure webpack-dev-server agregando server.js .

// server.js

var webpack = require("webpack");
var WebpackDevServer = require("webpack-dev-server");
var config = require("./webpack.dev.config");

var server = new WebpackDevServer(webpack(config), {
    // ...
});

server.listen(8080);

Modificar webpack.config.js
- Agregue webpack-dev-server/client a cada ítem definido en "entry" .
- Agregue webpack/hot/only-dev-server a cada ítem definido en "entry" .
  - NOTA: Cambie si es necesario ...
  - Use webpack/hot/only-dev-server para bloquear la actualización de la página si HMR falla.
  - Use webpack/hot/dev-server para actualizar automáticamente la página si HMR falla.
- Añadir new webpack.HotModuleReplacementPlugin() a "plugins"
```
module.exports = {
    entry: {
        js: [
            'webpack-dev-server/client?http://localhost:8080'
            'webpack/hot/only-dev-server',
            './index.js'
        ]
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin()
    ]
};
```

Agregue hot: true en la webpack-dev-server

var server = new WebpackDevServer(webpack(config), {
    hot: true

    // ... other configs
});

Modified text is an extract of the original Stack Overflow Documentation

Licenciado bajo CC BY-SA 3.0

No afiliado a Stack Overflow

webpack
Reemplazo de módulo caliente

Buscar..