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 = ; moduleexports = // ... Other Webpack config devServer: // ... Other Webpack Dev Server config hot: true plugins: // ... Other Webpack plugins ;
Configuration
A plugin can take an object with keys update
and manifest
as an argument:
manifest: update: ;
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
.-
;
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.-
;
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
. -
;
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:
;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 {// Implementation of the working function}; -
The names of the main functions and their arguments must be strictly defined.
-
manifest
:module {{// Implementation of the working function}}; -
update
:module {{// 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 { { var script = document; scriptcharset = 'utf-8'; scriptsrc = $require$p + $hotChunkFilename$; if $crossOriginLoading$ scriptcrossOrigin = $crossOriginLoading$; documenthead; }};