接口更改时 webpack-dev-server 和 ts-loader 不会重新加载

Posted 2023-03-13

【中文标题】接口更改时 webpack-dev-server 和 ts-loader 不会重新加载

【英文标题】：webpack-dev-server & ts-loader not reloads when interface changed

【发布时间】：2019-04-18 03:14:00

【问题描述】：

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

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

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

接口/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 时：

接口/IHelloState.ts

export interface IHelloState 
    // message: string;

什么都没有发生。甚至“[HMR] 正在检查服务器上的更新...”或“[HMR] 没有热更新”。显示。

当我更改 Interface/IHelloState.ts 和 index.tsx 时：

接口/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"
);

【问题讨论】：

但是一个接口的改变并不影响实际的代码..

@Nurbol Alpysbayev 哦，我修正了我的例子。问题是，如果真实对象类型与缓存接口（未更改的接口）不匹配，则会发生类型错误。谢谢你的提及。

@J.Lee 为了解决这个问题，您需要做哪些更改？我现在遇到了同样的问题。

有同样的问题，有什么解决办法吗？

@que1326 你能测试将Interface 更改为Class 吗？我没有完全测试它，但我记得它有效。

【参考方案1】：

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

显然，ts-loader 只为提供 javascript 输出的文件和 typescript 定义文件生成输出。然后 webpack watcher 读取输出，如果这些文件之一发生变化，webpack 会更新。

在您的情况下，您的文件不生成 JavaScript 输出并且不是打字稿定义文件。因此它们不会产生任何输出，并且 webpack 观察者不会注意到它们何时发生变化。

【讨论】：

是的，这就是问题所在。类型定义不会改变 javascript 输出，并且 dev-server 只会在 javascript 输出改变时重新加载。