webpack => Vervanging hete module

Opmerkingen

webpack-hot-middleware

Gebruik met webpack-dev-middleware , door webpack-hot-middleware/client te voegen aan binnenkomst.

config

Voeg configs toe als querystring aan het pad. Voorbeeld:

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

Optie	Beschrijving
pad	Het pad waarop de middleware de gebeurtenisstream weergeeft
time-out	De tijd om te wachten na een verbroken verbinding voordat u opnieuw probeert verbinding te maken
bedekking	Stel in op false om de op DOM gebaseerde client-side overlay uit te schakelen.
reload	Stel in op true om de pagina automatisch opnieuw te laden wanneer webpack vastloopt.
geen informatie	Stel in op true om het registreren van informatieconsoles uit te schakelen.
stil	Stel in op true om alle console-logboekregistratie uit te schakelen.
dynamicPublicPath	Stel in op true om webpack publicPath te gebruiken als voorvoegsel van het pad. (We kunnen `__webpack_public_path__` dynamisch instellen tijdens runtime in het beginpunt, zie opmerking van `output.publicPath` )

Gebruik met webpack-dev-middleware

Installeer webpack-dev-middleware via npm

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

Wijzig webpack.config.js

Voeg webpack-hot-middleware/client aan elk item dat is gedefinieerd in "entry"

new webpack.HotModuleReplacementPlugin() aan "plugins"

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

Voeg deze toe aan 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,
}));

HMR inschakelen voor module

Om een module in aanmerking te laten komen voor Hot Module Replacement (HMR), is de eenvoudigste manier om module.hot.accept() in de module toe te voegen, als volgt:

// ...

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

Gebruik met webpack-dev-server

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

Configureer webpack-dev-server door server.js toe te voegen .

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

Wijzig webpack.config.js
- Voeg webpack-dev-server/client aan elk item dat is gedefinieerd in "entry" .
- Voeg webpack/hot/only-dev-server aan elk item dat is gedefinieerd in "entry" .
  - OPMERKING: Wijzig indien nodig ...
  - Gebruik webpack/hot/only-dev-server om het vernieuwen van pagina's te blokkeren als HMR mislukt.
  - Gebruik webpack/hot/dev-server om de pagina automatisch te vernieuwen als HMR mislukt.
- new webpack.HotModuleReplacementPlugin() aan "plugins"
```
module.exports = {
    entry: {
        js: [
            'webpack-dev-server/client?http://localhost:8080'
            'webpack/hot/only-dev-server',
            './index.js'
        ]
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin()
    ]
};
```

Voeg hot: true in de webpack-dev-server

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

    // ... other configs
});

Modified text is an extract of the original Stack Overflow Documentation

Licentie onder CC BY-SA 3.0

Niet aangesloten bij Stack Overflow

webpack
Vervanging hete module

Zoeken…