webpack => Ersättning av het modul

Anmärkningar

Webpack-hot-middleware

Använd med webpack-dev-middleware genom att lägga till webpack-hot-middleware/client till posten.

config

Lägg till configs som frågesträng på sökvägen. Exempel:

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

Alternativ	Beskrivning
väg	Sökvägen som mellanprogrammet serverar händelseströmmen på
Paus	Tiden att vänta efter en frånkoppling innan du försöker ansluta igen
täcka över	Ställ in på falskt för att inaktivera det DOM-baserade överlägget på klientsidan.
ladda om	Ställ in på true för att ladda om sidan automatiskt när webpacket fastnar.
noInfo	Ställ in på true för att inaktivera loggning av informationskonsol.
tyst	Ställ in på true för att inaktivera all konsolloggning.
dynamicPublicPath	Ställ in på true för att använda webpack publicPath som prefix för sökväg. (Vi kan ställa in `__webpack_public_path__` dynamiskt vid körning i startpunkten, se not för `output.publicPath` )

Använd med webpack-dev-middleware

Installera webpack-dev-middleware via npm

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

Ändra webpack.config.js

Lägg till webpack-hot-middleware/client till varje objekt definierat i "entry"

Lägg till new webpack.HotModuleReplacementPlugin() till "plugins"

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

Lägg till dessa till 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,
}));

Aktivera HMR för modul

För att göra en modul kvalificerad för Hot Module Replacement (HMR) är det enklaste sättet att lägga till module.hot.accept() inuti modulen, så här:

// ...

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

Använd med webpack-dev-server

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

Konfigurera webpack-dev-server genom att lägga till 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);

Ändra webpack.config.js
- Lägg till webpack-dev-server/client till varje objekt som definieras i "entry" .
- Lägg till webpack/hot/only-dev-server till varje objekt definierat i "entry" .
  - OBS: Ändra vid behov ...
  - Använd webpack/hot/only-dev-server att blockera siduppdatering om HMR misslyckas.
  - Använd webpack/hot/dev-server att automatiskt uppdatera sidan om HMR misslyckas.
- Lägg till new webpack.HotModuleReplacementPlugin() till "plugins"
```
module.exports = {
    entry: {
        js: [
            'webpack-dev-server/client?http://localhost:8080'
            'webpack/hot/only-dev-server',
            './index.js'
        ]
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin()
    ]
};
```

Lägg till hot: true i webpack-dev-server serverkonfiguration

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

    // ... other configs
});

Modified text is an extract of the original Stack Overflow Documentation

Licensierat under CC BY-SA 3.0

Inte anslutet till Stack Overflow

webpack
Ersättning av het modul

Sök…