webpack => Wymiana modułu na gorąco

Uwagi

webpack-hot-middleware

Używaj z webpack-dev-middleware , dodając webpack-hot-middleware/client do wpisu.

Config

Dodaj konfiguracje jako ciąg zapytania do ścieżki. Przykład:

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

Opcja	Opis
ścieżka	Ścieżka, na której oprogramowanie pośredniczące obsługuje strumień zdarzeń
koniec czasu	Czas oczekiwania po rozłączeniu przed ponownym nawiązaniem połączenia
narzuta	Ustaw na wartość false, aby wyłączyć nakładkę po stronie klienta opartą na modelu DOM.
przeładować	Ustaw na wartość true, aby automatycznie ładować stronę ponownie, gdy pakiet sieciowy zablokuje się.
brak informacji	Ustaw na wartość true, aby wyłączyć rejestrowanie informacyjne konsoli.
cichy	Ustaw na wartość true, aby wyłączyć rejestrowanie wszystkich konsoli.
dynamicPublicPath	Ustaw na true, aby używać webpack publicPath jako prefiksu ścieżki. (Możemy ustawić `__webpack_public_path__` dynamicznie w czasie wykonywania w punkcie wejścia, patrz uwaga `output.publicPath` )

Używaj z oprogramowaniem pośredniczącym webpack-dev-middleware

Zainstaluj webpack-dev-middleware przez npm

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

Zmodyfikuj plik webpack.config.js

Dodaj webpack-hot-middleware/client do każdego elementu zdefiniowanego w "entry"

Dodaj new webpack.HotModuleReplacementPlugin() do "plugins"

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

Dodaj je do 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,
}));

Włącz HMR dla modułu

Aby moduł kwalifikował się do wymiany modułu na gorąco (HMR), najprostszym sposobem jest dodanie module.hot.accept() wewnątrz modułu, w następujący sposób:

// ...

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

Używaj z webpack-dev-server

Zainstaluj webpack-dev-server przez npm.
```
npm i -D webpack-dev-server
```

Skonfiguruj webpack-dev-server , dodając 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);

Zmodyfikuj plik webpack.config.js
- Dodaj webpack-dev-server/client do każdego elementu zdefiniowanego w "entry" .
- Dodaj webpack/hot/only-dev-server do każdego elementu zdefiniowanego w "entry" .
  - UWAGA: W razie potrzeby zmień ...
  - Użyj webpack/hot/only-dev-server aby zablokować odświeżanie strony, jeśli HMR zawiedzie.
  - Użyj webpack/hot/dev-server aby automatycznie odświeżyć stronę, jeśli HMR zawiedzie.
- Dodaj new webpack.HotModuleReplacementPlugin() do "plugins"
```
module.exports = {
    entry: {
        js: [
            'webpack-dev-server/client?http://localhost:8080'
            'webpack/hot/only-dev-server',
            './index.js'
        ]
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin()
    ]
};
```

Dodaj hot: true w konfiguracji webpack-dev-server

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

    // ... other configs
});

Modified text is an extract of the original Stack Overflow Documentation

Licencjonowany na podstawie CC BY-SA 3.0

Nie związany z Stack Overflow

webpack
Wymiana modułu na gorąco

Szukaj…