javascript - Webpack 热重载不重载
问题描述
我有这些配置:
.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,
},
});
索引.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
解决方案
推荐阅读
- angular - 根据从 Okta Angular 8 收到的标志路由用户
- python - 如何处理线性回归中的日期字段
- excel - 在excel中计算单元格区域中超过2个字符的单词数
- nginx - 在闪亮的服务器不工作的情况下,在 NGINX 中将 HTTP 重定向到 HTTPS
- javascript - jQuery:如何在文件上传后启用保存 btn
- java - 安装没有成功。无法安装应用程序。APK列表
- c++ - 如何在 C++ 中解决循环依赖
- r - 如何使 R Studio Server 加载时间更快?
- mongodb - MongoDB 到其他数据库同步
- reactjs - React 应用程序 - 编译错误 - jest-diff/build/diffLines.d.ts(8,13): '=' 预期