答案：通过配置 Webpack 多入口分别打包前端和后端代码，设置 target 为 web 和 node，使用 externals 排除 Node 模块，结合 Babel 转换语法，实现全栈项目统一构建。
Webpack 打包 JS 全栈项目需要兼顾前端和后端代码的处理方式。虽然 Webpack 最常用于前端资源打包，但通过合理配置，也能支持 Node.js 后端代码的打包，实现全栈项目的统一构建流程。以下是详细的配置与打包步骤。
理解全栈项目的结构
一个典型的 JS 全栈项目通常包含：
- 前端代码：位于 /client 目录，使用 React、Vue 等框架，依赖 ES6+、CSS、图片等资源。
- 后端代码：位于 /server 目录，使用 Express、Koa 等 Node.js 框架。
- 共享模块：如工具函数、类型定义等，可能在 /shared 目录。
目标是用 Webpack 分别打包前端静态资源和后端服务代码，同时保留 Node.js 原生模块引用能力。
配置多入口打包（前端 + 后端）
使用 Webpack 的多入口配置，分别构建 client 和 server。
创建 webpack.config.js 文件：
const path = require('path');
module.exports = [
// 前端打包配置
{
mode: 'production',
entry: './client/index.js',
output: {
path: path.resolve(__dirname, 'dist/client'),
filename: 'bundle.js'
},
target: 'web',
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: 'babel-loader'
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
}
},
// 后端打包配置
{
mode: 'production',
entry: './server/index.js',
output: {
path: path.resolve(__dirname, 'dist/server'),
filename: 'server.js'
},
target: 'node',
externals: [/^node:.*/, 'express'], // 排除 Node 原生模块和 express 等依赖
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: 'babel-loader'
}
]
},
resolve: {
extensions: ['.js']
},
node: {
__dirname: false,
__filename: false
}
}
];
说明：
- target: 'web'：前端构建环境。
- target: 'node'：后端构建时，避免 Webpack 替换 Node.js 全局变量。
- externals：防止将 Node 模块打包进输出文件，保持 require 正常工作。
- Babel：转换 ES6+ 语法，需配合 .babelrc 配置。
安装必要依赖
运行以下命令安装核心工具：
npm install --save-dev webpack webpack-cli babel-loader @babel/core @babel/preset-env css-loader style-loader
创建 .babelrc 文件：
{
"presets": ["@babel/preset-env"]
}
编写启动脚本
在 package.json 中添加构建命令：
"scripts": {
"build": "webpack",
"start": "node dist/server/server.js"
}
执行 npm run build 后，生成：
- dist/client/bundle.js：前端资源。
- dist/server/server.js：可运行的后端文件。
注意：需手动将前端 bundle 引入 HTML，并在服务器中提供静态资源服务。
优化：分离共享代码
若前后端共用某些模块，可通过 resolve.modules 统一路径引用：
resolve: {
modules: [path.resolve(__dirname, 'shared'), 'node_modules']
}
这样可在 client 和 server 中直接 import 'utils/api' 而不写相对路径。
基本上就这些。合理配置 Webpack，就能统一构建 JS 全栈项目，提升部署效率。关键在于区分 target、正确使用 externals，并确保 Babel 支持最新语法。不复杂但容易忽略细节。
