Webpack 错误“[HMR] 您需要重新启动应用程序！”答案

【问题标题】：Webpack Error "[HMR] You need to restart the application!"Webpack 错误“[HMR] 您需要重新启动应用程序！”
【发布时间】：2018-02-24 11:29:26
【问题描述】：

我将 Webpack HMR 用于 Node.js (Koa2) 服务器。 HMR 工作顺利，直到抛出错误。此后 HMR 停止工作。

例如，当 'asdfadsf' 变量未定义时：

[server] [HMR] ReferenceError: asdfadsf is not defined
[server]     at Object../server.js (A:\cms2\src\server\server.js:15:1)
[server]     at __webpack_require__ (A:\cms2\build\webpack\bootstrap 04a9ee280262ac7805a4:637:1)
[server]     at fn (A:\cms2\build\webpack\bootstrap 04a9ee280262ac7805a4:47:1)
[server]     at A:\cms2\src\server\index.js:13:35
[server]     at hotApply (A:\cms2\build\webpack\bootstrap 04a9ee280262ac7805a4:540:1)
[server]     at A:\cms2\build\webpack\bootstrap 04a9ee280262ac7805a4:248:1
[server]     at <anonymous>
[server]     at process._tickCallback (internal/process/next_tick.js:188:7)
[server] [HMR] You need to restart the application! <============

如何解决？

"webpack": "^3.10.0"

入口文件 index.js:

import app from './server'

const server = app.listen(4000)

if (module.hot) {
    module.hot.accept('./server', () => {
        server.removeAllListeners('request', app)
        server.on('request', app.callback())
    })
    module.hot.accept()
}

server.js

import 'babel-polyfill'
import Koa from 'koa'

const app = new Koa()

app.use((ctx) => {
    ctx.body = 'Hello World'
})
export default app

server.js 在 HMR 处于活动状态时出现新错误

import 'babel-polyfill'
import Koa from 'koa'

const app = new Koa()
// Undefined variable error which will crash the HMR functionality
asdfasdf
app.use((ctx) => {
    ctx.body = 'Hello World'
})
export default app

我在 webpack 服务器配置文件中使用的一些插件

new StartServerPlugin({
    name: 'server.js',
    nodeArgs: ['--inspect'],
}),
new webpack.BannerPlugin({
    banner: 'require("source-map-support").install();',
    raw: true,
    entryOnly: false,
}),
new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin(),
new webpack.DefinePlugin({
    __CLIENT__: false,
    __SERVER__: true,
    __PRODUCTION__: false,
    __DEV__: true,
    'process.env': {
        NODE_ENV: '"development"',
        BUILD_TARGET: '"server"',
    },
}),

【问题讨论】：

标签： webpack webpack-hmr koa2

【解决方案1】：

注意：我不确定这是好是坏，但它确实有效。

我将 ES6 导入更改为 requires 并在 accept 函数中添加了一个 try/catch 块。

更改的入口文件（index.js）

let app = require('./server').default

const server = app.listen(4000)

if (module.hot) {
    module.hot.accept('./server', () => {
        try {
            server.removeAllListeners('request', server)
            app = require('./server').default
            server.on('request', app.callback())
        } catch (err) {
            console.log(err)
        }
    })
    module.hot.accept()
    module.hot.dispose(() => {
        server.close()
    })
}

【讨论】：