Webpack 实现 Node.js 代码热替换

2020-06-17 07:34:14易采站长站整理

这两天为了这个问题, Gitter 上问, Twitter 上问, GitHub 上问, 两天没反应
原来写博客的 jlongster 不理我, 我也不知道 Webpack 作者的联系方式
最后在 Gitter 上发的消息他似乎看到了, 就粗略地解释了一遍, 醍醐灌顶啊…
https://github.com/webpack/docs/issues/45#issuecomment-149793458


Here is the process in short:

Compile the server code with webpack
Use target: "node" or target: "async-node"
Enabled HMR via --hot or HotModuleReplacementPlugin
Use webpack/hot/poll or webpack/hot/signal
The first polls the fs for updates (easy to use)
The second listens for a process event to check for updates (you need a way to send the signal)
Run the bundle with node.
You can't use existing HMR loaders like react-hot-loader or style-loader because they make no sense in a server environment. Just add manuall replacement code at the correct location (i. e. accept request handler like in the example)

You 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 first. It's pretty easy to use and suitable for dev environments. For production (if you want to hot update your production server) the signal approach is better suited.

原话就不翻译了, 理解之后主要就是 Webpack 怎么配置和脚本怎么运行
我写了一遍, 代码仅仅是这么短, 热替换就实现了:
https://github.com/jiyinyiyong/webpack-backend-HMR-demo
其中代码可以从 jlongster 的配置教程里抄:
http://jlongster.com/Backend-Apps-with-Webpack–Part-II


webpack = require 'webpack'

module.exports =
entry: [
'webpack/hot/poll?1000' # <-- 轮询更新内容的代码
'./src/main' # <-- 项目入口
] target: 'node' # <-- 指明编译方式为 node
output:
path: 'build/'
filename: 'bundle.js' # <-- 编译结果的文件名
module:
loaders: [
{test: /.coffee/, loader: 'coffee'}
] plugins: [
new webpack.HotModuleReplacementPlugin() # <-- 照常启动 hot mode
] resolve:
extensions: ['.js', '', '.coffee']

命令行环境运行的话, 注意是 webpack 而不是 webpack-dev-server
注意后台运行的 & 只是为了不阻塞, 你有两个终端就开两个吧


npm i
webpack --watch & # <-- watch 模式
node build/bundle.js # <-- 运行的是打包结果的代码

我写了两个测试文件, 一个是会修改的代码 src/lib.coffee:


exports.data = 'code 5'

exports.printSelf = ->
console.log 'doing 3'

另一个入口文件 src/main.coffee 包含了处理模块替换的代码: