Javascript 如何在另一个包中重用webpack包?
嗨,我正在用SSR构建一个React应用程序。服务器和客户机部分都是用typescript编写并分别传输的。 以下是应用程序结构,以便更好地理解: 此处,简化的Web包为服务器和客户端捆绑包配置:Javascript 如何在另一个包中重用webpack包?,javascript,node.js,reactjs,webpack,webpack-4,Javascript,Node.js,Reactjs,Webpack,Webpack 4,嗨,我正在用SSR构建一个React应用程序。服务器和客户机部分都是用typescript编写并分别传输的。 以下是应用程序结构,以便更好地理解: 此处,简化的Web包为服务器和客户端捆绑包配置: // webpack.client.js module.exports = { mode: "development", resolve: { modules: ["src", "static", "node_modules"], extensions: [".ts", "
// webpack.client.js
module.exports = {
mode: "development",
resolve: {
modules: ["src", "static", "node_modules"],
extensions: [".ts", ".tsx", ".js", ".jsx"],
},
entry: [
"./src/client/index.tsx"
],
output: {
filename: "bundle.js",
path: PUBLIC_PATH,
},
module: {
rules: [
{
test: /\.tsx?$/,
use: [
{
loader: "ts-loader",
}
],
},
]
},
plugins: [
new webpack.DefinePlugin({ IS_SERVER: false })
]
};
除了目标
和外部
//webpack.server.js
const config = {
mode: "development",
resolve: {
modules: ["src", "static", "node_modules"],
extensions: [".ts", ".tsx", ".js", ".jsx"],
},
externals: [webpackNodeExternals()],
target: 'node',
entry: [
"./src/server/index.ts"
],
output: {
filename: "bundle.js",
path: SERVER_BUILD_PATH
},
module: {
rules: [
{
test: /\.tsx?$/,
use: [
{
loader: "ts-loader",
}
],
},
]
},
plugins: [
new webpack.DefinePlugin({ IS_SERVER: true })
]
};
在服务器代码中,我得到了一个渲染器
函数,它将React应用程序渲染为字符串
// renderer.tsx
import React from "react";
import { renderToString } from "react-dom/server";
import { App } from "client/App";
const html = (app) => `
<html>
<head>
</head>
<body>
<div id="root">${app}</div>
<script src="/public/bundle.js"></script>
</body>
</html>
`;
export async function renderer(req) {
const app = renderToString(<App />);
return html(app);
}
正如您所见,这两个部分都需要传输React应用程序。问题是-如何在服务器捆绑包中重用传输的客户端代码,以便服务器配置只需要传输index.ts
和renderer.tsx
?您可以使用包来实现这一点
这是我的
谢谢你的回答。但是
webpack merge
解决了一个不同的问题。我想重用传输包,而不是配置文件。
//index.ts
app.get("*", async (req, res) => {
const content = await renderer(req);
res.send(content);
});
const merge = require('webpack-merge');
const baseConfig = require('./webpack.config.js');
const webpack = require("webpack");
module.exports = merge(baseConfig, {
plugins: [
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify('development'),
'BASE_URL': JSON.stringify('http://localhost:5000/')
}
})
],
watch: true
});