Webpack 错误“[HMR] 你需要重启应用程序！”

Question

我在 Node.js (Koa2) 服务器上使用 Webpack HMR。 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"',
    },
}),

Answer 1

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

我将 ES6 导入更改为 require 并在 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()
    })
}

Webpack 错误“[HMR] 你需要重启应用程序！”

Webpack Error "[HMR] You need to restart the application!"

webpack

webpack-hmr

koa2

如何解决？

入口文件index.js:

server.js

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

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

更改条目文件（index.js）