繁体   English   中英

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

webpack-dev-server & ts-loader not reloads when interface changed

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

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

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

但是当我更改接口文件时,webpack-dev-server(或 ts-loader,我不知道)不会重新加载和转换已更改的接口文件。

接口/IHelloState.ts

export interface IHelloState {
    message: string;
}

接口.index.ts

export {IHelloState} from "./IHelloState";

索引.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.tsindex.tsx 时

接口/IHelloState.ts

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

索引.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"
});
1 个回复

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

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

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

2 webpack-dev-server不会重新加载页面

我不知道为什么开发服务器不希望在浏览器中重新加载页面。 我的系统是OSX。 webpack.config.js package.json “公共”目录中的index.html 更改app.js之后,我必须手动重新加载页面才能查看更改。 请帮助。 我很确定这里有 ...

3 强制 webpack-dev-server 重新加载

我正在为 webpack 编写一个插件,它使用 EXECA 在后台启动良好的围栏。 工作结束后,我将错误添加到 compiler.errors 数组中。 由于 execa 在 webpack 编译过程完成后添加的单独进程中运行错误。 结果, webpack-dev-server 重新加载页面,没有错 ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2021 STACKOOM.COM