【发布时间】：2019-10-08 08:34:45
【问题描述】：
我不想承认这一点，但我已经花了三个漫长的晚上试图做这件事——我认为这是一件很简单的事情。我终于到了受够了它的阶段，坦率地说，我很沮丧，因为“它根本行不通”。
这是我试图实现的目标：
- 将我的 Express 服务器与 Webpack 捆绑在一起（虽然我当前的代码只是在浏览器中呈现一个字符串，但它应该编译使用 Babel 编译的服务器呈现的 React 组件）
- 将包保存在内存中（如果没有其他方法，则保存在磁盘上）
- 运行 webpack / dev / hot 中间件来为我的 Node Express 应用程序提供服务，服务器渲染页面（将是 React 组件）的更改将在浏览器中自动更新。
我尝试了许多组合、已弃用的教程、不再维护的 npm 包和下载的示例，这些示例根本不起作用。
这是我目前的设置：
webpack.server.config.js：
const path = require('path');
const webpack = require('webpack');
const nodeExternals = require('webpack-node-externals');
module.exports = {
name: 'server',
mode: 'development',
target: 'node',
externals: nodeExternals(),
entry: [ './src/server/index' ],
output: {
path: path.resolve(__dirname, 'dist'),
// path: "/",
filename: '[name].js',
publicPath: '/assets/',
libraryTarget: 'commonjs2'
},
plugins: [
new webpack.HotModuleReplacementPlugin()
],
module: {
rules: [
{
test: /.js$/,
loader: 'babel-loader',
include: path.resolve(__dirname, 'src/'),
exclude: /node_modules/,
options: {
presets:
[['@babel/preset-env', { modules: 'false' }], '@babel/preset-react'],
plugins: [
['@babel/plugin-proposal-object-rest-spread', { useBuiltIns: true }],
'@babel/plugin-proposal-class-properties'
]
}
},
{
test: /\.scss$/,
loader: 'ignore-loader'
},
{
test: /\.css$/,
loader: 'ignore-loader'
},
{
test: /\.(jpg|png|svg|gif|pdf)$/,
loader: 'file-loader',
options: {
name: '[path][name].[ext]'
}
}
]
}
};
index.js：
import http from 'http';
import fs from "fs";
import express from "express";
import favicon from 'serve-favicon';
// import renderer from "./renderer";
import renderApp from './welcome';
const app = express();
app.use(favicon('./public/favicon.ico'));
app.use(express.static("public"));
if (process.env.NODE_ENV !== 'production') {
const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');
const webpackHotMiddleware = require('webpack-hot-middleware');
const serverConfig = require('../../webpack.server.config');
const compiler = webpack(serverConfig);
app.use(webpackDevMiddleware(compiler, {
stats: {colors: true},
headers: { "Access-Control-Allow-Origin": "http://localhost"},
publicPath: serverConfig.output.publicPath
}));
app.use(require("webpack-hot-middleware")(compiler));
}
app.get("*", function(req, res) {
fs.readFile("./src/server/html/index.html", "utf8", function(err, data) {
const context = {};
const html = renderApp();
//const html = renderer(data, req.path, context);
res.set('content-type', 'text/html');
res.send(html);
res.end();
});
});
const PORT = process.env.PORT || 8080;
app.listen(3000);
坦率地说，我也很困惑这应该如何工作。
是否应该执行以下步骤？：
- webpack webpack.server.config.js --watch
- node dist/server.js // webpack 输出文件夹
这会神奇地热重载我的服务器吗？
欢迎所有帮助，或者如果您碰巧有一个工作演示。
我只是无法完成这项工作。
最后，我还将热重载（重新渲染）我的客户端包，但我想这将是容易的部分，因为我已经看到了很多很多关于此的资源。
【问题讨论】：
-
我感受到了你的痛苦。我遇到了同样的问题，最后从我发现的教程种子中复制/粘贴。我在名为 [Tutsgalaxy.com] - React 16 - The Complete Guide (incl. React Router 4 & Redux) 的 torrent 中使用了演示文件。有一整章是关于 webpack 的。如果你给我上传链接，我会为你上传整个项目。
标签： javascript node.js reactjs webpack