webpack => Sostituzione del modulo caldo

Osservazioni

webpack-hot-middleware

Utilizzare con webpack-dev-middleware , aggiungendo webpack-hot-middleware/client alla voce.

config

Aggiungi le configurazioni come stringa di query al percorso. Esempio:

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

Opzione	Descrizione
sentiero	Il percorso su cui il middleware sta servendo il flusso di eventi
tempo scaduto	Il tempo di aspettare dopo una disconnessione prima di tentare di riconnettersi
copertura	Impostare su false per disabilitare l'overlay lato client basato su DOM.
ricaricare	Impostare su true per ricaricare automaticamente la pagina quando il webpack si blocca.
NoInfo	Impostare su true per disabilitare la registrazione della console informativa.
silenzioso	Impostare su true per disabilitare tutte le registrazioni della console.
dynamicPublicPath	Impostare su true per utilizzare webpack publicPath come prefisso del percorso. (Possiamo impostare `__webpack_public_path__` dinamicamente in fase di runtime nel punto di ingresso, vedere la nota di `output.publicPath` )

Utilizzare con webpack-dev-middleware

Installa webpack-dev-middleware tramite npm

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

Modifica webpack.config.js

Aggiungi webpack-hot-middleware/client a ciascun elemento definito in "entry"

Aggiungi 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()
    ]
};

Aggiungi questi 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,
}));

Abilita HMR per modulo

Per rendere un modulo idoneo per la sostituzione di moduli caldi (HMR), il modo più semplice è aggiungere module.hot.accept() all'interno del modulo, in questo modo:

// ...

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

Utilizzare con webpack-dev-server

Installa webpack-dev-server tramite npm.
```
npm i -D webpack-dev-server
```

Configura webpack-dev-server aggiungendo 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);

Modifica webpack.config.js
- Aggiungi webpack-dev-server/client a ciascun elemento definito in "entry" .
- Aggiungi webpack/hot/only-dev-server a ogni elemento definito in "entry" .
  - NOTA: cambia se necessario ...
  - Usa webpack/hot/only-dev-server per bloccare l'aggiornamento della pagina se HMR fallisce.
  - Usa webpack/hot/dev-server per aggiornare automaticamente la pagina se HMR fallisce.
- Aggiungi 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()
    ]
};
```

Aggiungi hot: true nella configurazione di webpack-dev-server

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

    // ... other configs
});

Modified text is an extract of the original Stack Overflow Documentation

Autorizzato sotto CC BY-SA 3.0

Non affiliato con Stack Overflow

webpack
Sostituzione del modulo caldo

Ricerca…