Я использую 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 с 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"
});