如何解决Preact SSR热重装/重建
我正在尝试为我的preact ssr构建添加到开发环境的自动浏览器刷新。
package.json
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1","start:client": "webpack -w","start:server": "babel-node server.js","dev": "yarn run start:client & yarn run start:server"
},"keywords": [],"author": "","license": "ISC","devDependencies": {
"@babel/cli": "^7.11.6","@babel/core": "^7.11.6","@babel/node": "^7.10.5","@babel/preset-env": "^7.11.5","babel-loader": "^8.1.0","babel-plugin-transform-react-jsx": "^6.24.1","webpack": "^4.44.2","webpack-cli": "^3.3.12"
},"dependencies": {
"express": "^4.17.1","preact": "^10.5.2","preact-render-to-string": "^5.1.10","preact-router": "^3.2.1"
}
webpack.config.js
const path = require("path");
module.exports = {
entry: "./src/index.js",output: {
path: path.join(__dirname,"dist"),filename: "app.js"
},module: {
rules: [
{
test: /\.js$/,use: {
loader: "babel-loader",options: {
presets: ['@babel/preset-env']
}
}
}
]
},mode: 'development'
};
server.js
const express = require('express');
const path = require('path');
const render = require('preact-render-to-string');
const { h } = require('preact');
const { App } = require('./src/App');
const app = express();
const HTMLShell = (html) => `
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>preact ssr</title>
</head>
<body>
<div id="app">${html}</div>
<script src="./app.js"></script>
</body>
</html>
`;
app.use(express.static(path.join(__dirname,'dist')));
app.get('*',(req,res) => {
const html = render(<App />);
res.send(HTMLShell(html));
});
app.listen(3001);
当我运行yarn dev时，Webpack正在正确地监视任何更改和重建。我必须手动刷新浏览器才能看到效果，有没有办法使它自动化？
解决方法
您似乎没有webpack-dev-server属于此项目的一部分，该项目负责处理发生更改时实时重新加载浏览器的情况。首先将其添加到您的项目中：
dim1_len = 0.3 * img.shape[0]
dim2_len = 0.3 * img.shape[1]
dim3_len = 0.3 * img.shape[2]
然后，用以下内容替换package.json中的当前yarn add webpack-dev-server --dev
：
scripts运行"scripts": {
"test": "echo \"Error: no test specified\" && exit 1","start:client": "webpack-dev-server","start:server": "babel-node server.js","dev": "yarn run start:client & yarn run start:server"
},应该使您在进行更改后实时重新加载并重新编译。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
