webpack-dev-server 和 ts-loader 在界面改变时不会重新加载

Question

I'm using webpack@4.16.1 , webpack-dev-server@3.1.4 and ts-loader@4.4.2 .

I use Interface/index.ts to manage imports, to organize multiple interface imports.

But When I change interface file, webpack-dev-server(or ts-loader, I don`t know) not reload & transpile changed interface file.

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"));

When I change Interface/IHelloState.ts like:

Interface/IHelloState.ts

export interface IHelloState {
    // message: string;
}

Nothing happens. Not even "[HMR] Checking for updates on the server..." or "[HMR] Nothing hot updated." shows.

When I change Interface/IHelloState.ts and index.tsx like:

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
};

Now and error reports.

[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'.

What should I change?

I run webpack-dev-server with webpack-dev-server --config webpack.dev.config.js --hot .

This is my config file.

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"
});

Answer 1

I encountered a similar issue. What solved it for me was to change the filenames of files that contain only interfaces from *.ts to *.d.ts.

Apparently, the ts-loader generates output only for files that give JavaScript output, and typescript definition files. The output is then read by the webpack watcher, and webpack updates if one of these files changes.

In your case, you have files that generate no JavaScript output and are not typescript definition files. So no output will be generated from them, and the webpack watcher won't notice when they change.