问题描述
我有这些配置:
.common.js
const path = require("path");
module.exports = {
entry: {
index: "./src/scripts/index.ts",library: "./src/scripts/library.ts",},resolve: {
extensions: [".ts",".tsx",".js"],module: {
rules: [
{
test: /\.ts?$/,use: "ts-loader",exclude: /node_modules/,{
test: /\.html$/i,loader: "html-loader",],};
.dev.js
const path = require("path");
const common = require("./webpack.common.js");
const { merge } = require("webpack-merge");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { HotModuleReplacementPlugin } = require("webpack");
module.exports = merge(common,{
output: {
filename: "[name].bundle.js",path: path.resolve(__dirname,"dev"),module: {
rules: [
{
test: /\.scss$/i,use: ["style-loader","css-loader","sass-loader"],plugins: [
new HtmlWebpackPlugin({
template: "./src/index.html",}),new HotModuleReplacementPlugin(),mode: "development",devServer: {
compress: true,hot: true,open: true,port: 9000,});
index.ts
import { Potato } from "./potato";
import "./styles.scss";
const potato = new Potato();
console.log(potato.getColor());
console.log(potato.getSize());
console.log("test");
declare const module: any; // without this,ts can't be transpiled,since module.hot doesn't exist
if (module.hot) {
console.log("hot"); //this gets logged
module.hot.accept();
}
土豆.ts
export class Potato {
private color: string;
private size: number;
constructor() {
this.color = "blue";
this.size = 123;
}
public getColor() {
return this.color;
}
public getSize() {
return this.size;
}
}
到目前为止,在我启动服务器后,它会打开一个新选项卡。当我在 index.ts
中更改某些内容时,它会记录“热”,之后它不会重新加载或更改任何内容(使用 console.logs
测试)。我也收到了这个警告(是的,一团糟):
[HMR] Update Failed: Loading hot update chunk index Failed.
(missing: http://localhost:9000/index.e33a832f0f738968166e.hot-update.js)
loadUpdateChunk/<@http://localhost:9000/index.bundle.js:1011:26
loadUpdateChunk@http://localhost:9000/index.bundle.js:1006:20
__webpack_require__.hmrC.jsonp/<@http://localhost:9000/index.bundle.js:1466:29
__webpack_require__.hmrC.jsonp@http://localhost:9000/index.bundle.js:1461:22
hotCheck/</<@http://localhost:9000/index.bundle.js:844:45
hotCheck/<@http://localhost:9000/index.bundle.js:840:53
promise callback*hotCheck@http://localhost:9000/index.bundle.js:827:47
check@webpack://webpack-example/./node_modules/webpack/hot/dev-server.js?:14:5
@webpack://webpack-example/./node_modules/webpack/hot/dev-server.js?:55:4
emit@webpack://webpack-example/./node_modules/events/events.js?:153:17
reloadApp@webpack://webpack-example/./node_modules/webpack-dev-server/client/utils/reloadApp.js?:23:16
ok@webpack://webpack-example/./node_modules/webpack-dev-server/client/index.js?:120:14
initSocket/<@webpack://webpack-example/./node_modules/webpack-dev-server/client/socket.js?:48:25
onMessage/this.sock.onmessage@webpack://webpack-example/./node_modules/webpack-dev-server/client/clients/SockJSClient.js?:67:10
[5]</EventTarget.prototype.dispatchEvent@webpack://webpack-example/./node_modules/sockjs-client/dist/sockjs.js?:170:20
[14]</</SockJS.prototype._transportMessage/<@webpack://webpack-example/./node_modules/sockjs-client/dist/sockjs.js?:891:16
[14]</</SockJS.prototype._transportMessage@webpack://webpack-example/./node_modules/sockjs-client/dist/sockjs.js?:889:17
[3]</EventEmitter.prototype.emit@webpack://webpack-example/./node_modules/sockjs-client/dist/sockjs.js?:86:18
WebSocketTransport/this.ws.onmessage@webpack://webpack-example/./node_modules/sockjs-client/dist/sockjs.js?:2965:10
EventHandlerNonNull*WebSocketTransport@webpack://webpack-example/./node_modules/sockjs-client/dist/sockjs.js?:2963:3
[14]</</SockJS.prototype._connect@webpack://webpack-example/./node_modules/sockjs-client/dist/sockjs.js?:832:24
[14]</</SockJS.prototype._receiveInfo@webpack://webpack-example/./node_modules/sockjs-client/dist/sockjs.js?:806:8
g@webpack://webpack-example/./node_modules/sockjs-client/dist/sockjs.js?:66:16
[3]</EventEmitter.prototype.emit@webpack://webpack-example/./node_modules/sockjs-client/dist/sockjs.js?:86:18
[12]</</InfoReceiver.prototype.doXhr/<@webpack://webpack-example/./node_modules/sockjs-client/dist/sockjs.js?:567:10
g@webpack://webpack-example/./node_modules/sockjs-client/dist/sockjs.js?:66:16
[3]</EventEmitter.prototype.emit@webpack://webpack-example/./node_modules/sockjs-client/dist/sockjs.js?:86:18
InfoAjax/<@webpack://webpack-example/./node_modules/sockjs-client/dist/sockjs.js?:374:10
g@webpack://webpack-example/./node_modules/sockjs-client/dist/sockjs.js?:66:16
[3]</EventEmitter.prototype.emit@webpack://webpack-example/./node_modules/sockjs-client/dist/sockjs.js?:86:18
[17]</</AbstractXHRObject.prototype._start/this.xhr.onreadystatechange@webpack://webpack-example/./node_modules/sockjs-client/dist/sockjs.js?:1601:14
EventHandlerNonNull*[17]</</AbstractXHRObject.prototype._start@webpack://webpack-example/./node_modules/sockjs-client/dist/sockjs.js?:1560:3
AbstractXHRObject/<@webpack://webpack-example/./node_modules/sockjs-client/dist/sockjs.js?:1498:10
setTimeout handler*AbstractXHRObject@webpack://webpack-example/./node_modules/sockjs-client/dist/sockjs.js?:1497:13
XHRLocalObject@webpack://webpack-example/./node_modules/sockjs-client/dist/sockjs.js?:2918:13
InfoAjax@webpack://webpack-example/./node_modules/sockjs-client/dist/sockjs.js?:356:13
[12]</</InfoReceiver._getReceiver@webpack://webpack-example/./node_modules/sockjs-client/dist/sockjs.js?:536:12
[12]</</InfoReceiver.prototype.doXhr@webpack://webpack-example/./node_modules/sockjs-client/dist/sockjs.js?:556:26
InfoReceiver/<@webpack://webpack-example/./node_modules/sockjs-client/dist/sockjs.js?:525:10
setTimeout handler*InfoReceiver@webpack://webpack-example/./node_modules/sockjs-client/dist/sockjs.js?:524:13
SockJS@webpack://webpack-example/./node_modules/sockjs-client/dist/sockjs.js?:734:14
SockJSClient@webpack://webpack-example/./node_modules/webpack-dev-server/client/clients/SockJSClient.js?:43:18
initSocket@webpack://webpack-example/./node_modules/webpack-dev-server/client/socket.js?:21:12
@webpack://webpack-example/./node_modules/webpack-dev-server/client/index.js?:177:7
./node_modules/webpack-dev-server/client/index.js?http://localhost:9000@http://localhost:9000/index.bundle.js:291:1
__webpack_require__@http://localhost:9000/index.bundle.js:447:33
@http://localhost:9000/index.bundle.js:1505:30
@http://localhost:9000/index.bundle.js:1508:12
我已经打开了一个 issue on GitHub
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)