These two days to this question, Gitter asked, Twitter asked, GitHub asked, two days did not respond
Original blog Jlongster ignore me, I do not know Webpack author's contact information
Last message sent on the Gitter He seemed to see it, and he explained it in a rough way.
Https://github.com/webpack/docs/issues/45
Here's the process in Short:compile the server code and Webpack use target: "Node" or Targe T: "Async-node" Enabled HMR via--hot or hotmodulereplacementplugin use Webpack/hot/poll or webpack/hot/signal the Olls the FS for updates (easy to use) the second listens for a process event to check for updates (your need a way to send
The signal) Run the bundle with node. Can ' t use existing HMR loaders like React-hot-loader or style-loader because they make no sense in a server environmen T. Just add Manuall replacement code at the correct location (I. E. Accept request Handler like in the example) can ' t Use the Webpack-dev-server. It ' s a server which serves assets not a runner. Just run Webpack--watch and node bundle.js. I would go the webpack/hot/poll?1000 route. It ' s pretty easy to use and suitable for dev environments.
For production (if you are want to hot update your production server) The signal approach is better suited.
The words are not translated, after understanding the main is webpack how to configure and how to run the script
I wrote it again, the code was just so short that the hot swap was realized:
Https://github.com/jiyinyiyong/webpack-backend-HMR-demo
Where the code can be copied from the Jlongster configuration tutorial:
Http://jlongster.com/Backend-Apps-with-Webpack--Part-II
Webpack = Require ' webpack '
module.exports =
entry: [
' webpack/hot/poll?1000 ' # <--poll code for updated content
'./ Src/main ' # <--entry
]
target: ' node ' # <--indicates that the compilation is node
output:
path: ' build/'
filename: ' Bundle.js ' # <--file name for compilation results
module:
loaders: [
{test:/\.coffee/, loader: ' Coffee '}
]
Plugins: [
new Webpack. Hotmodulereplacementplugin () # <--starts hot mode as
usual
resolve:
extensions: ['. js ', ', '. Coffee ']
If the command line environment is running, note that it is webpack, not webpack-dev-server.
Note that the background running & just to not block, you have two terminals open two
NPM i
webpack--watch & # <--Watch mode
node Build/bundle.js # <--is running code to package the results
I wrote two test files, one is the code that will be modified Src/lib.coffee:
Exports.data = ' Code 5 '
exports.printself =->
console.log ' doing 3 '
Another entry file, Src/main.coffee, contains code for processing module substitution:
lib = Require './lib '
console.log lib.data
lib.printself ()
counter = 0
setinterval-> counter
+ = 1
console.log counter
,
if Module.hot
module.hot.accept './lib ',->
lib = Require '. /lib '
console.log lib.data
lib.printself ()
Running a Demo, you know how the effect, SetInterval is not replaced by interference
In the build/directory, each modification generates a JSON file to record the modified content:
Copy Code code as follows:
➤➤l build/
0.1dadeb2eb7b01e150126.hot-update.js 0.c1d0d73de39660806d0c.hot-update.js 2849b61a15d31ffe5e08.hot-update.json 0.99ea3ea7633f6b3750e6.hot-update.js 0.eaa7b323eba37ae58997.hot-update.js 9b4a5ad617ec1dbc48a3.hot-update.json Fb584971920454f9ccbe.hot-update.json
0.9abf25005c61357a0ce5.hot-update.js 0.fb584971920454f9ccbe.hot-update.js A664b5851a99ac0865ca.hot-update.json
0.9b4a5ad617ec1dbc48a3.hot-update.js 1dadeb2eb7b01e150126.hot-update.json Bundle.js
0.a664b5851a99ac0865ca.hot-update.js 256267122c6d325755b0.hot-update.json C1d0d73de39660806d0c.hot-update.json
The exact contents of the file are as follows: the information that is needed to identify the update is generally considered to be included.
➤➤cat build/0.c797c084381bfeac37f7.hot-update.js
exports.id = 0;
Exports.modules = {
/***/3:
/***/function (module, exports, __webpack_require__) {
var counter, Lib;
Lib = __webpack_require__ (4);
Console.log (lib.data);
Lib.printself ();
Counter = 0;
SetInterval (function () {
counter = 1;
Return Console.log (counter, 3);
}, Watts);
if (true) {
module.hot.accept (4, function () {
lib = __webpack_require__ (4);
Console.log (lib.data);
return lib.printself ();}
);
/***/ }
};
Other programmes
During the day on the Internet to find a solution, by the way in the forum posted a post to ask this thing, ready-made two of the main instructions more clear plan, it is worth learning from
One is Baidu's technology blog, write about how the module object to do processing, that is, manual monitoring file modifications, and then clear module cache, Reload module
Thinking clearly and carefully, although a bit redundant code, or you can try:
Http://www.jb51.net/article/73739.htm
Another seems to be doing hack to require.extensions, adding operations and events, when the module file is updated, the corresponding module is automatically updated, and emit an event, through this effect, the location of the module reference can do some processing, using the new code, This should be said or relatively rough, after all, not all the code is easy to replace
Https://github.com/rlidwka/node-hotswap
Feelings
Considering that I have been hanged in webpack this tree, also do not intend to delve into, perhaps Node.js official lib/module.js do optimization can make good function to, however, JavaScript after all is not immutable data use the wind community, than Erlang , because the code substitution is related to the problem of state update, it is not easy to restart, and restart now have Node-dev Supervisor Nodemon three sets of options you choose
For me, the main cumulo scheme has a huge dependence on the WebSocket, now front-end development has been able to do the server update code, the client automatically updated,
Through the mechanism of webpack and react, local update DOM and pure function module, if the development environment can also be hot replacement, this for the development of the efficiency of the promotion is too big, originally feel hot replacement unreachable, but it is likely to be within reach of the efficiency improvement!
There is probably a hole in the back, black technology after all ... I met you again.
Interested can look at the Jlongster wrote a few related to God, very helpful:
Http://jlongster.com/archive