webpack
Замена горячего модуля

Angular 2 AngularJS CSS HTML JavaScript jQuery Node.js React TypeScript Vue.js

замечания

WebPack-горячие промежуточное программное обеспечение

Используйте это с помощью webpack-dev-middleware , добавив webpack-hot-middleware/client для входа.

конфиг

Добавить configs в качестве строки запроса в путь. Пример:

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

вариант	Описание
дорожка	Путь, по которому промежуточное программное обеспечение обслуживает поток событий на
Тайм-аут	Время ожидания после отключения, прежде чем пытаться снова подключиться
наложение	Установите значение false, чтобы отключить накладную клиентскую сторону на основе DOM.
перезагружать	Установите значение true, чтобы автоматически перезагрузить страницу, когда веб-пакет застревает.
noInfo	Установите значение true, чтобы отключить ведение журнала информационных консолей.
тихо	Установите значение true, чтобы отключить ведение журнала консоли.
dynamicPublicPath	Установите значение true, чтобы использовать webpack publicPath в качестве префикса пути. (Мы можем установить `__webpack_public_path__` динамически во время выполнения в точке входа, см. Примечание `output.publicPath` )

Использовать с webpack-dev-middleware

Установите webpack-dev-middleware через npm

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

Изменить webpack.config.js

Добавьте webpack-hot-middleware/client к каждому webpack-hot-middleware/client определенному в "entry"

Добавить 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()
    ]
};

Добавьте их в 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 для модуля

Чтобы сделать модуль подходящим для замены Hot Module (HMR), самый простой способ - добавить module.hot.accept() внутри модуля, например:

// ...

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

Использовать с webpack-dev-сервером

Установите webpack-dev-сервер через npm.
```
npm i -D webpack-dev-server
```

Настройте webpack-dev-server , добавив 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);

Изменить webpack.config.js
- Добавьте webpack-dev-server/client к каждому webpack-dev-server/client определенному в "entry" .
- Добавьте webpack/hot/only-dev-server к каждому webpack/hot/only-dev-server определенному в "entry" .
  - ПРИМЕЧАНИЕ. При необходимости измените ...
  - Используйте webpack/hot/only-dev-server чтобы заблокировать обновление страницы, если HMR завершился с ошибкой.
  - Используйте webpack/hot/dev-server для автоматического обновления страницы, если HMR завершится с ошибкой.
- Добавить 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()
    ]
};
```

Добавить hot: true в webpack-dev-server

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

    // ... other configs
});

Modified text is an extract of the original Stack Overflow Documentation

Лицензировано согласно CC BY-SA 3.0

Не связан с Stack Overflow