webpack-dev-server &界面更改时 ts-loader 不会重新加载 [英] webpack-dev-server & ts-loader not reloads when interface changed

问题描述

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

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

我使用 Interface/index.ts 来管理导入，组织多个界面导入.

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

但是当我更改接口文件时，webpack-dev-server(或 ts-loader，我不知道)不会重新加载 &转译更改后的接口文件.

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

接口/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] 没有热更新."显示.

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

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

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

接口/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.

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

这是我的配置文件.

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

推荐答案

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

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.

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

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.

就您而言，您的文件不生成 JavaScript 输出，也不是打字稿定义文件.所以它们不会产生任何输出，而且 webpack 观察者不会注意到它们何时发生变化.

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.

这篇关于webpack-dev-server &界面更改时 ts-loader 不会重新加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！