Nodejs中webpack和后台结合的问题

发布于 1周前 作者 sinazl 来自 nodejs/Nestjs

Nodejs中webpack和后台结合的问题
后台是 java/tomcat
那整个项目部署时 webpack 打包好的项目应该如何和后台结合？
起一个 webpack-dev-server 跑 webpack 的项目再起一个 tomcat 跑后台？
（不一定是webpack-dev-server，意思就是同时起两个端口的两个服务，然后再通过webpack.config.js配置解决跨域问题？）
新手小白求大大们解答

Harmonyos Next教程
19 回复

webpack 生成 jsp 么？


前后端分离的，服务器也分离好了，部署的时候用 Nginx 区分两个不同的服务

webpack dev server

dev server 开发啊 … 完成之后, 只要不做 server side render. 前端开发结果不都是静态文件么…结合呗…

生产环境部署的时候直接打包成一个 js 文件了吧, 直接放到站点的 public 目录或者 cdn 上

开发的时候, 官方的建议就是你想的那样, webpack-dev-server 和本来的后端 server 各起一个

You may want to run a backend server or a mock of it in development. You should not use the webpack-dev-server as a backend. Its only purpose is to serve static (webpacked) assets.

You can run two servers side-by-side: The webpack-dev-server and your backend server.

ref: https://webpack.github.io/docs/webpack-dev-server.html#combining-with-an-existing-server

你是说前端代码怎么在开发时请求后端的 API 么？

这种情况我一般是用 webpack-dev-middleware 新建了一个 express 应用，前端发到 webpack 所在 express 应用的请求会被转发到后端所在的端口。简单的说就是： localhost:3001/api/users 会被转到 localhost:3002/api/users 。

webpack-dev-server 也可以通过配置达到转发的目的，另外写的目的是为了更灵活一些，我可以自定义一些转发方案， webpack-dev-server 的 proxy 配置还蛮 tricky 的。。

如果做好分布式部署的打算一开始就做 jsonp 或者设置 cross-region 么 干嘛要转发呢…
lz 消失了？你这个项目什么架构的， java 只提供 json 数据前端纯静态？

没有消失，看了上面各层回复，在理解尝试中，
java 提供 json ，没打算分布式，





感谢各位

html 仍然由 express 输出，只引 dev-server 上的 js 资源（部署时换成 CDN 的），可以避免跨域。

html 仍然由 java 输出。。。

刚好也有类似的问题

dev 的话 试试 dora 的 proxy

可以理解为把 bundle.js 放到 cdn 上？

可以压根就不用 webpack-dev-server 吧，感觉没什么关联两者， webpack 做点 build 的工作就好了，不比一定用那个 web server 啊

bundle 放在哪里不影响跨域啊

直接放到站点的 public 路径下呗

那就别用 webpack 了啊 ,传统页面用这个感觉是自己找事

嗯， html ， css ， js 就够了哦

在Node.js项目中，将Webpack与后台结合通常涉及前端资源打包和后端API服务的集成。下面是一个简要的步骤和示例代码展示，帮助你理解这一过程。

步骤：

  1. 安装依赖： 首先，确保你安装了Node.js和npm。然后，在项目根目录下运行以下命令安装Webpack和相关依赖：

    npm install --save-dev webpack webpack-cli webpack-dev-server
npm install express body-parser

  2. 配置Webpack： 创建webpack.config.js文件，配置Webpack打包前端资源：

    const path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    // 其他配置...
};

  3. 设置Express后台： 创建server.js文件，设置Express服务器提供API服务，并服务Webpack打包后的静态文件：

    const express = require('express');
const path = require('path');
const app = express();

app.use(express.static(path.join(__dirname, 'dist')));
app.get('/api/data', (req, res) => res.json({ message: 'Hello from backend!' }));

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => console.log(`Server is running on port ${PORT}`));

  4. 运行项目： 使用Webpack开发服务器或手动打包前端资源，并启动Express服务器。

这样，你的Node.js项目就成功地将Webpack打包的前端与后台API服务结合起来了。

回到顶部