Webpack TypeScript module.hot 不存在

Question

我想在用 TypeScript 编写的 NodeJS 项目中启用 Webpack HMR。

但是 module.hot 不可用:

@types/webpack-env定义：

declare var module: __WebpackModuleApi.Module

与@types/node定义冲突：
```
declare var module: NodeModule
```

删除 @types/node，解决了问题，但禁用了 process:

process.env.NODE_ENV === 'production' // [ts] Cannot find name 'process'

Answer 1

您可以扩大全局范围并使用界面合并重新打开 NodeModule 界面并添加缺少的 hot 属性.

import webpack = require("webpack");

declare global {
    interface NodeModule {
        hot: {
            accept(dependencies: string[], callback: (updatedDependencies: string[]) => void): void;
            accept(dependency: string, callback: () => void): void;
            accept(errHandler?: (err: any) => void): void;
            decline(dependencies: string[]): void;
            decline(dependency: string): void;
            decline(): void;

            dispose(callback: (data: any) => void): void;
            addDisposeHandler(callback: (data: any) => void): void;

            removeDisposeHandler(callback: (data: any) => void): void;
            // ...
        }
    }
}

但实际上，这种增强可能应该在 Webpack 声明文件本身中完成。

Answer 2

可以像在文件顶部添加以下行一样简单。

///<reference types="webpack-env" />

Answer 3

这里写的人很少，这是最好的方法：

npm i -D @types/webpack-env

对我来说，它按预期工作，解决了无法识别的问题 hot 属性。

在我的项目中，我使用的是这些版本：

"@types/node": "^8.0.19",
"@types/webpack-env": "^1.13.0"

我不知道问题是否仍然是最新的，但是对于我的问题，为 webpack 安装类型帮助了我。

Answer 4

将 .hot 更改为 ['hot']

if (module.hot) {
    module.hot.accept();
    module.hot.dispose(() => {

使用

if (module['hot']) {
    module['hot'].accept();
    module['hot'].dispose(() => {

Answer 5

冲突解决

@types/webpack-env 自更新后：

module 上的冲突已在 this PR
process 添加到 this commit

原题中的代码现在只需要@types/webpack-env.

但是导入@types/node就不会再冲突了。

安装

npm install --save-dev @types/webpack-env

如果您还需要 NodeJS 环境定义：

npm install --save-dev @types/node

Answer 6

这修复了它

yarn add @types/webpack-env --dev

VScode 会立即生效

Intellij 需要重启

Webpack TypeScript module.hot 不存在

Webpack TypeScript module.hot does not exist

node.js

typescript

webpack

webpack-hmr

冲突解决

安装