webpack-custom-hot-update-strategy
v1.0.1
Published
Webpack plugin for customize HMR functions that request and add code of changed modules to the page
Downloads
8
Maintainers
Readme
Webpack Custom Hot Update Strategy
Документация на русском
Webpack plugin that allows you to change the strategy for Hot Module Replacement to receive updated modules when hot: true
is enabled.
Installation
npm install --save-dev webpack-custom-hot-update-strategy
In Webpack config file webpack.config.js:
const CustomHotUpdateStrategy = require('webpack-custom-hot-update-strategy');
module.exports = {
// ... Other Webpack config
devServer: {
// ... Other Webpack Dev Server config
hot: true
},
plugins: [
// ... Other Webpack plugins
new CustomHotUpdateStrategy()
]
};
Configuration
A plugin can take an object with keys update
and manifest
as an argument:
new CustomHotUpdateStrategy({
manifest: require('./path_to_implementation'),
update: require('./path_to_implementation')
});
This plugin contains several options for implementing these functions:
manifest
: require a function template that loads the module update manifest[publicPath][hash].hot-update.json
.require('webpack-custom-hot-update-strategy/strategies/manifest/hotDownloadManifest');
Applies by default, if no key is specified
manifest
. This function corresponds to the native functionHot Module Replacement
.
update
: require a function template which takes an argumentchunkId
, на его основе specifies the path to the file ([publicPath][chunkId].[hash].hot-update.js
) and adds the module script to the page.require('webpack-custom-hot-update-strategy/strategies/update/hotDownloadUpdateChunk');
Applies by default, if no key is specified
update
. This function corresponds to the native functionHot Module Replacement
: specifies the path to the updated module, creates a new tag<script>
, assigns the path assrc
and append this tag inhead
.require('webpack-custom-hot-update-strategy/strategies/update/hotDownloadUpdateChunkFetch');
Specifies the path to the updated module, makes a request for it using
fetch
, creates a new tag<script>
, inserts the content received from the query and append this tag inhead
.hotDownloadUpdateChunkFetchEval:
require('webpack-custom-hot-update-strategy/strategies/update/hotDownloadUpdateChunkFetchEval');
Specifies the path to the updated module, makes a request for it using
fetch
, and executes the content, retrieved from the query witheval()
.
Your own implementation
To write your own implementation of these functions, you need to follow some rules by which the template will be converted into a working function that will fall into the module wrapper.
Function wrapper:
The module should wrap the working functions in an anonymous one, which it returns.
module.exports = function() { // Implementation of the working function };
The names of the main functions and their arguments must be strictly defined.
manifest
:module.exports = function() { function hotDownloadManifest(requestTimeout) { // Implementation of the working function } };
update
:module.exports = function() { function hotDownloadUpdateChunk(chunkId) { // Implementation of the working function } };
Since many of the values used in these functions are custom, you must replace them with special
$expressions$
in the template, which will be replaced with the desired values at compile time.
List of special expressions:
$require$
->__webpack_require__
$crossOriginLoading$
->output.crossOriginLoading
$hotMainFilename$
->output.hotUpdateMainFilename
$hotChunkFilename$
->output.hotUpdateChunkFilename
$hash$
-> Current module hash
With all of the above in mind, the standard function template for update
prop will look like this:
module.exports = function() {
function hotDownloadUpdateChunk(chunkId) {
var script = document.createElement('script');
script.charset = 'utf-8';
script.src = $require$.p + $hotChunkFilename$;
if ($crossOriginLoading$) script.crossOrigin = $crossOriginLoading$;
document.head.appendChild(script);
}
};