webpack-dev-server和ts-loader在接口更改时无法重新加载

Question

我正在使用 webpack@4.16.1、webpack-dev-server@3.1.4 和 ts-loader@4.4.2。

我使用 Interface/index.ts 来管理导入，以组织多个接口导入。

但是当我更改接口文件时，webpack-dev-server （或 ts-loader ，我不知道）不会重新加载和转换更改后的接口文件。

Interface/IHelloState.ts

export interface IHelloState {
    message: string;
}

Interface.index.ts

export {IHelloState} from "./IHelloState";

index.tsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import "./index.css";
import {IHelloState} from "./Interface";

const helloState: IHelloState = {
    message: "hello!"
};

ReactDOM.render(<div>{helloState.message}</div>, document.getElementById("root"));

当我修改Interface/IHelloState.ts时：

Interface/IHelloState.ts

export interface IHelloState {
    // message: string;
}

什么都没有发生。甚至没有出现 "[HMR] Checking for updates on the server..." 或者 "[HMR] Nothing hot updated." 的提示。

当我修改 Interface/IHelloState.ts 和 index.tsx 时，如下所示：

Interface/IHelloState.ts

export interface IHelloState {
    message: string;
    state: boolean;
}

index.tsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import "./index.css";
import {IHelloState} from "./Interface";

const helloState: IHelloState = {
    message: "hello!",
    state: true
};

现在来看错误报告。

[tsl] ERROR in (PATH...)\index.tsx(8,5)
      TS2322: Type '{ message: string; state: boolean; }' is not assignable to type 'IHelloState'.
  Object literal may only specify known properties, and 'state' does not exist in type 'IHelloState'.

我应该如何修改？

我使用 webpack-dev-server --config webpack.dev.config.js --hot 运行 webpack-dev-server。

这是我的配置文件。

webpack.dev.config.js

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const webpack = require("webpack");

module.exports = Object.assign(require("./webpack.base.config"), {
    entry: [
        path.join(__dirname, "src/app/index.tsx"),

        "webpack/hot/only-dev-server"
    ],

    output: {
        path: path.join(__dirname, "build/app"),
        filename: "static/js/bundle.[hash].js"
    },

    module: {
        rules: [
            {
                test: /\.jsx?$/,
                loader: "babel-loader"
            }, {
                test: /\.tsx?$/,
                loader: "ts-loader",
                options: {
                    configFile: "tsconfig.app.json"
                }
            },
            {
                test: /\.css$/,
                use: [
                    "style-loader",
                    {
                        loader: "css-loader",
                        options: {
                            modules: false
                        }
                    }
                ]
            },
            {
                exclude: [/\.tsx?/, /\.jsx?$/, /\.html$/, /\.css$/, /\.json$/],
                loader: "file-loader",
                options: {
                    name: "static/files/[hash].[ext]"
                }
            }
        ]
    },

    resolve: {
        extensions: [".ts", ".tsx", ".js", ".jsx", ".css", ".json"]
    },

    plugins: [
        new HtmlWebpackPlugin({
            template: path.join(__dirname, "src/app/index.html")
        }),

        new webpack.HotModuleReplacementPlugin()
    ],

    devServer: {
        historyApiFallback: {
            index: "/"
        }
    },

    target: "electron-renderer",

    mode: "development"
});

- kuroneko0441

---

@J.Lee，你是如何解决这个问题的？我现在也遇到了同样的问题。 - Shawn

@Shawn 我找不到任何有用的解决方案。我暂时的解决方法就是重新启动Webpack开发服务器。 - kuroneko0441

@J.Lee 谢谢您回复我，使用 ts-loader 我没有什么好运气，但是我转换成了 awesome-typescript-loader ，现在似乎已经解决了这个问题。我还没有对它进行过太多测试，所以不确定百分之百，但值得一读。 - Shawn

有相同的问题，有解决方案吗？ - que1326

@que1326 你能测试一下将“Interface”更改为“Class”吗？我没有完全测试过，但我记得它可以工作。 - kuroneko0441

Answer 1

我遇到了类似的问题。解决方法是将仅包含接口的文件的文件名从*.ts更改为*.d.ts。

显然，ts-loader仅为生成JavaScript输出和TypeScript定义文件的文件生成输出。然后webpack watcher读取输出，并在其中一个文件更改时更新webpack。

在您的情况下，您有一些不生成JavaScript输出且不是TypeScript定义文件的文件。因此，它们不会产生任何输出，webpack watcher也无法注意到它们的变化。

- ahuvi81

---

是的，那就是问题所在。类型定义不会改变JavaScript输出，而开发服务器只有在JavaScript输出更改时才会重新加载。 - kuroneko0441