在开始之前,这个链接很有用:HMR的目的是什么？.
我在巨大的项目管理/构思方面没有丰富的经验.我还年轻,留着美丽的胡须.所以我在这里,寻找建议.
我正在寻找和思考角度2的种子,我想知道使用HMR是否是开发大型应用程序以及如何做到这一点的可行选择.
那些只是,我只是想与你讨论做出我的决定.我们都需要跨越我们的经验:-)
基于这个例子:
@Component({
selector: 'home',
templateUrl: `
<form (ngSubmit)="submitState(localState.value)" autocomplete="off">
<input
[value]="localState.value"
(input)="localState.value = $event.target.value"
placeholder="Submit Local State to App State">
<button>Submit Value</button>
</form>
`
})
export class HomeComponent {
localState = { value: '' };
constructor(public appState: AppState, public title: Title) {}
onSubmit(value: string) {
this.appState.set('value', value);
this.localState.value = '';
}
}
通过使用appState,可以动态重新加载组件并注入数据.听起来很酷.但这是我的第一个问题:要启用此功能,组件必须在appstate树中有一个位置,因此localState在示例中使用like 是个好主意.这迫使我们使用组件内部的对象,这可能是巨大的.这可能很烦人.你同意吗 ？这可能是大型应用程序的问题吗？(我打算在大型应用程序上工作).
它可能没什么,因为我只需要存储localStorage我希望被HMR跟踪的数据.那么为什么不呢.
谈到存储,我也使用@ngrx/store作为Redux的实现.这似乎是一个非常好的主意,因为国家可以是我的localStorage.当应用程序更新时,我只需要补充我的状态就可以了.hmr不会跟踪组件中的数据,只有状态才会跟踪.
听起来不错.但这是个好主意吗？我试图找到一个连接器来处理@ngrx/store和hmr之间的通信. 胜利!但这个套餐似乎已经过时了.
我可以自己做,但这是个好主意吗？ …
目前我正在努力让HMR在我的Webpack 2设置中工作.我将解释我的整个设置,所以我希望这足以让某人了解正在发生的事情.
我项目的结构:
config
dev.js
prod.js
dist
css
js
index.html
node_modules
src
components
// some JavaScript components
shared
stylesheets
index.js
.babelrc
package.json
webpack.config.js
这是我的webpack.config.js文件的内容,放在我的项目的根目录中:
function buildConfig(env) {
return require('./config/' + env + '.js')(env)
}
module.exports = buildConfig;
所以在这个文件中我可以选择将不同的环境传递给buildConfig函数.我使用此选项来使用不同的配置文件进行开发和生产.这是我package.json文件中的内容:
{
"main": "index.js",
"scripts": {
"build:dev": "node_modules/.bin/webpack-dev-server --env=dev",
"build:prod": "node_modules/.bin/webpack -p --env=prod"
},
},
"devDependencies": {
"autoprefixer-loader": "^3.2.0",
"babel-cli": "^6.18.0",
"babel-core": "^6.24.1",
"babel-loader": "^6.2.5",
"babel-preset-latest": "^6.16.0",
"babel-preset-react": "^6.16.0",
"babel-preset-stage-0": "^6.16.0",
"css-loader": "^0.25.0",
"extract-text-webpack-plugin": "^2.1.0",
"json-loader": "^0.5.4", …reactjs webpack webpack-dev-server webpack-hmr hot-module-replacement
可能一直都在问这个问题，但是我在阳光下尝试了所有方法，却找不到解决方案。
我创建了一个回购协议，以便更轻松地获取帮助。您可以克隆它，运行npm install，然后npm start:dev在http：// localhost：8080上看到一个快速的本地服务器。
它可以正常工作，并且当我更改文件（例如src/components/Note/Note.css）时，应用程序会重新加载。但是，我只想重新加载组件，而不是整个页面。我不确定自己在做什么错。任何帮助将不胜感激！
我正在运行Laravel Valet以在本地托管站点，并运行Laravel Mix来编译资产并使用 Webpack 开发服务器执行 HMR
我.dev通过以下方式在本地保护了该站点
valet secure
{{ mix('js/app.js') }} 运行时调用没问题npm run watch
但是每当我想通过运行hotnpm 脚本来利用热重载时，我都会得到这个
GET https://localhost:8080//css/app.css net::ERR_CERT_AUTHORITY_INVALID
GitHub问题建议添加--https 标志，我试过了，也--http
我什至通过--disable-host-check标志禁用了主机检查并清除了所有可能的缓存，甚至尝试了新的git clone但无济于事
这是我的 package.json
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "npm run development -- --watch",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --https --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm …我正在尝试热重新加载以使用我的设置.目前,它的工作原理如下 -
server.js
// this is the main server, which connects to db, serves react components, etc
const app = express();
app.get('/:params?*', (req, res) => {
res.status(200).send(`
<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
hi
<script src="http://localhost:3000/build/client.js"></script>
</body>
</html>
`);
});
...
app.listen(5000);
gulpfile.babel.js
const CLIENT_DEV_CONFIG = {
entry: [
CLIENT_ENTRY,
'webpack-hot-middleware/client',
'eventsource-polyfill',
],
plugins: [
new webpack.HotModuleReplacementPlugin(),
],
output: {
...CLIENT_OUTPUT,
publicPath: 'http://localhost:3000/build/',
},
module: {
loaders: [BABEL_LOADER]
},
}
gulp.task('client-watch', done => {
console.log(CLIENT_DEV_CONFIG.output.publicPath);
const opts = …我有使用Typescript,ReactJS和Webpack构建的前端应用程序.
我正在尝试启用HMR.
这些是启动脚本
"build": "NODE_ENV=production $(npm bin)/webpack --watch",
"dev": "$(npm bin)/nodemon --exec \"$(npm bin)/ts-node\" ./server/server.ts || npm run build",
这是我的ts-loader
{ test: /\.tsx?$/, loader: 'awesome-typescript-loader' }
和我的开发服务器配置
if (NODE_ENV === 'development') {
let webpack = require('webpack')
const webpackConfig = require('../webpack.config')
const compiler = webpack(webpackConfig)
app.use(require('webpack-dev-middleware')(compiler, {
noInfo: true, publicPath: webpackConfig.output.publicPath
}))
app.use(require('webpack-hot-middleware')(compiler))
}
我无法克服错误
[HMR] The following modules couldn't be hot updated: (Full reload needed)
This is usually because the modules which have changed (and their parents) do not know …我们的 Web 应用程序具有以下结构：
/src(.sln)
--/ClientSite
--/AdminSite
--/SharedWeb
在SharedWeb我们有以下文件夹：
--/Client
--/Admin
--/Shared
我们有这个结构，以便webpack-dev-server无论我们编辑什么文件都可以热重载，并且只有一个package.json等。如果有人感兴趣，我们为什么选择这个结构的主题：
共享 React 前端组件 -> 使用 TypeScript 分离项目 -> Visual Studio 2017
到目前为止一切正常，但现在我们需要部署我们的解决方案，我们需要将其导出bundle.js到正确的站点。
在webpack.client.config.js：
热重载工作正常，但脚本文件未正确导出到站点：
output: {
filename: "./Scripts/dist/[name].bundle.js",
},
脚本文件已正确导出，但热重载停止工作：
output: {
filename: "../ClientSite/Scripts/dist/[name].bundle.js",
},
根据文档使用路径和文件名的正确方法，没有任何效果：
output: {
path: path.resolve(__dirname, "Scripts/dist/"),
filename: "[name].bundle.js"
}
脚本文件已正确导出，但热重载不起作用。如果我使用webpackwith--watch并手动重新加载webpack-dev-serverURL，我可以看到更改，但它不会自动重新加载。
output: {
path: path.resolve(__dirname, "../ClientSite/Scripts/dist/"),
filename: "[name].bundle.js"
},
我有一个带Webpack Dev Middleware的Vue.js站点(由HTTP.sys Web服务器通过ASP.NET Core站点提供服务,但我猜这没关系).有谁知道我如何设置我的网站以清除浏览器的Javascript控制台在每个热重新加载事件？
这是我能找到的唯一相关链接,但它似乎是我不使用的Web服务器.我不确定为什么特定的Web服务器会很重要.
vue.js webpack-hmr hot-module-replacement webpack-dev-middleware
我正在为我的 nest.js 应用程序使用 webpack hot module reload (hmr)。重新加载有效，但在启动新实例之前不会等待旧实例完全关闭（数据库连接、电报机器人等）。这使得 typeorm 抛出以下错误：
AlreadyHasActiveConnectionError: Cannot create a new connection named "default", because connection with such name already exist and it now has an active connection session.
在我的main.ts我有一个关闭旧实例的处理程序：
if (module && module.hot) {
module.hot.accept();
module.hot.dispose(async () => {
console.log('disposing module');
await app.close();
console.log('has closed app');
});
}
当我运行 hmr 并对我的应用程序进行更改时，我可以看到它调用了 dispose 处理程序并立即启动了新应用程序。在启动新实例之前，如何让 webpack 等待 dispose 处理程序返回的承诺解决？
我使用 Docker 和 Kubernetes 部署了一个 Vue 页面，它正在运行。然而，即使我禁用了 HMR，Vite 仍然会在出错后刷新：
与“wss://dashboard.default.io:8181/”的 WebSocket 连接失败：
[vite] 服务器连接丢失。轮询重新启动...
Dockerfile：
FROM node:16-alpine3.14
WORKDIR /usr/src/app
COPY . .
RUN yarn install
EXPOSE 8181
CMD [ "yarn", "dev","--host", "--port", "8181" ]
yarn dev调用vite命令
vite.config.js：
export default defineConfig({
plugins: [vue()],
server: {
hmr: false
}
})
vue.config.js：
module.exports = {
devServer: {
proxy: 'https://backend.default.io'
}
}
包.json：
FROM node:16-alpine3.14
WORKDIR /usr/src/app
COPY . .
RUN yarn install
EXPOSE 8181
CMD [ "yarn", "dev","--host", "--port", "8181" …使用 ViteJS starter for React / SolidJS，
在代码更改触发 HMR 重新加载之前，如何检测（使用某种 js 回调）？（进行一些清理）
需要明确的是，我不是问如何使用 HMR，只是问如何在此之前进行一些清理。
我尝试过使用window.onbeforeunload没有效果。
谢谢。
我从这里使用了一个示例项目来设置一个带有热模块替换的webpack项目.然后我建立了一个示例骨干应用程序.
// main.js
import $ from 'jquery';
import Backbone from 'backbone';
import Router from './router';
window.app = window.app || {};
const app = new Backbone.Marionette.Application();
app.addRegions({content: '#content'});
app.on('start', () => {
if (Backbone.history)
Backbone.history.start({ pushState: true })
}
);
app.addInitializer(() => {
return new Router();
});
$( () => { app.start() });
// HMR
if (module.hot) {
module.hot.accept();
}我可以看到HRM根据[HMR] connected调试输出正在加载.当文件发生变化时,我可以看到它根据以下输出重建并推送到客户端的更新:
[HMR] Updated modules:
process-update.js?e13e:77 [HMR] - ./app/backbone/views/template.hbs
process-update.js?e13e:77 [HMR] - ./app/backbone/views/hello.js
process-update.js?e13e:77 [HMR] - ./app/backbone/router.js …webpack-hmr ×12
webpack ×8
javascript ×3
reactjs ×3
typescript ×3
vite ×2
angular ×1
backbone.js ×1
gulp ×1
json ×1
laravel ×1
laravel-mix ×1
nestjs ×1
ngrx ×1
node.js ×1
redux ×1
solid-js ×1
vue.js ×1
vuejs3 ×1