webpack => Remplacement du module chaud

Remarques

webpack-hot-middleware

Utilisez avec webpack-dev-middleware , en ajoutant webpack-hot-middleware/client à l'entrée.

Config

Ajoutez des configurations en tant que chaîne de requête au chemin. Exemple:

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

Option	La description
chemin	Le chemin d'accès du middleware au flux d'événements
temps libre	Le temps d'attente après une déconnexion avant de tenter de se reconnecter
recouvrir	Définissez la valeur sur false pour désactiver la superposition côté client basée sur DOM.
recharger	Défini sur true pour recharger automatiquement la page lorsque Webpack est bloqué.
pas d'information	Définissez la valeur sur true pour désactiver la journalisation de la console d'informations.
silencieux	Définissez la valeur sur true pour désactiver toute la journalisation de la console.
DynamicPublicPath	Défini sur true pour utiliser webpack publicPath comme préfixe du chemin. (Nous pouvons définir `__webpack_public_path__` dynamiquement à l'exécution dans le point d'entrée, voir note de `output.publicPath` )

Utiliser avec webpack-dev-middleware

Installez webpack-dev-middleware via npm

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

Modifier webpack.config.js

Ajouter webpack-hot-middleware/client à chaque élément défini dans "entry"

Ajouter un new webpack.HotModuleReplacementPlugin() à "plugins"

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

Ajoutez-les à 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,
}));

Activer HMR pour le module

Pour rendre un module éligible au remplacement du module chaud (HMR), le plus simple est d'ajouter module.hot.accept() dans le module, comme ceci:

// ...

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

Utiliser avec webpack-dev-server

Installez webpack-dev-server via npm.
```
npm i -D webpack-dev-server
```

Configurez webpack-dev-server en ajoutant 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);

Modifier webpack.config.js
- Ajoutez webpack-dev-server/client à chaque élément défini dans "entry" .
- Ajoutez webpack/hot/only-dev-server à chaque élément défini dans "entry" .
  - NOTE: Changer si nécessaire ...
  - Utilisez webpack/hot/only-dev-server pour bloquer le rafraîchissement de la page si HMR échoue.
  - Utilisez webpack/hot/dev-server pour actualiser automatiquement la page si HMR échoue.
- Ajouter un new webpack.HotModuleReplacementPlugin() à "plugins"
```
module.exports = {
    entry: {
        js: [
            'webpack-dev-server/client?http://localhost:8080'
            'webpack/hot/only-dev-server',
            './index.js'
        ]
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin()
    ]
};
```

Ajouter hot: true dans 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

Sous licence CC BY-SA 3.0

Non affilié à Stack Overflow

webpack
Remplacement du module chaud

Recherche…