webpack => Hot Module Ersatz

Bemerkungen

Webpack-Hot-Middleware

Verwendung mit webpack-dev-middleware durch Hinzufügen von webpack-hot-middleware/client zum Eintrag.

Konfig

Fügen Sie dem Pfad Konfigurationen als Abfragezeichenfolge hinzu. Beispiel:

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

Möglichkeit	Beschreibung
Pfad	Der Pfad, auf dem die Middleware den Ereignisstrom bereitstellt
Auszeit	Die Wartezeit nach einem Verbindungsabbruch, bevor die Verbindung erneut hergestellt werden kann
Überlagerung	Legen Sie false fest, um die DOM-basierte clientseitige Überlagerung zu deaktivieren.
neu laden	Auf true setzen, um die Seite automatisch neu zu laden, wenn das Webpack hängen bleibt.
keine Informationen	Setzen Sie den Wert auf true, um die Protokollierung der Informationskonsolen zu deaktivieren.
ruhig	Auf true setzen, um die gesamte Protokollierung der Konsole zu deaktivieren.
dynamicPublicPath	Auf true setzen, um webpack publicPath als Präfix des Pfads zu verwenden. (Wir können `__webpack_public_path__` zur Laufzeit dynamisch am Einstiegspunkt setzen, siehe Hinweis zu `output.publicPath` )

Verwendung mit Webpack-Dev-Middleware

Installieren Sie die Webpack-Dev-Middleware über npm

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

Ändern Sie die Datei webpack.config.js

Hinzufügen von webpack-hot-middleware/client zu allen in "entry" definierten Elementen

Hinzufügen des new webpack.HotModuleReplacementPlugin() zu "plugins"

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

Fügen Sie diese zu index.js hinzu

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

Aktivieren Sie HMR für das Modul

Um ein Modul für den Hot Module Replacement (HMR) in Frage zu stellen, können Sie am module.hot.accept() hinzufügen:

// ...

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

Verwendung mit Webpack-Dev-Server

Installieren Sie den webpack-dev-server über npm.
```
npm i -D webpack-dev-server
```

Konfigurieren Sie den webpack-dev-server indem Sie server.js hinzufügen.

// 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);

Ändern Sie die Datei webpack.config.js
- Fügen Sie webpack-dev-server/client zu allen in "entry" definierten Elementen hinzu.
- Fügen webpack/hot/only-dev-server in "entry" definierten Elementen webpack/hot/only-dev-server .
  - HINWEIS: Bei Bedarf ändern ...
  - Verwenden Sie webpack/hot/only-dev-server , um die webpack/hot/only-dev-server zu blockieren, wenn die HMR fehlschlägt.
  - Verwenden Sie webpack/hot/dev-server , um die Seite automatisch zu webpack/hot/dev-server wenn die HMR fehlschlägt.
- Hinzufügen des new webpack.HotModuleReplacementPlugin() zu "plugins"
```
module.exports = {
    entry: {
        js: [
            'webpack-dev-server/client?http://localhost:8080'
            'webpack/hot/only-dev-server',
            './index.js'
        ]
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin()
    ]
};
```

hot: true webpack-dev-server hot: true in der webpack-dev-server Konfiguration

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

    // ... other configs
});

Modified text is an extract of the original Stack Overflow Documentation

Lizenziert unter CC BY-SA 3.0

Nicht angeschlossen an Stack Overflow

webpack
Hot Module Ersatz

Suche…