JS全栈项目通常同时包含前端浏览器端代码和后端Node.js服务端代码，使用Webpack进行统一打包可以简化构建流程，保证前后端代码的依赖管理和构建规则统一，降低项目维护成本。
前期环境准备
首先需要在项目根目录初始化npm环境，安装Webpack相关依赖，执行以下命令完成基础依赖安装：
# 初始化项目 npm init -y # 安装webpack核心依赖和命令行工具 npm install webpack webpack-cli --save-dev # 安装处理JS代码的babel相关依赖 npm install @babel/core @babel/preset-env babel-loader --save-dev # 安装处理Node.js后端代码的依赖 npm install webpack-node-externals --save-dev
核心配置项说明
Webpack的配置文件通常命名为webpack.config.js，全栈项目需要根据前后端不同场景设置不同的配置，核心配置项包含以下几个部分：
- entry：指定打包的入口文件，前端和后端需要分别设置不同的入口
- output：指定打包后文件的输出路径和文件名
- module：配置各类文件的解析规则，通过loader处理非JS文件
- plugins：配置扩展插件，实现额外的构建功能
- target：指定打包的目标环境，前端为
web，后端为node
前端代码打包配置
前端代码运行在浏览器环境，需要处理ES6+语法兼容、静态资源加载等问题，下面是前端打包的基础配置示例：
const path = require('path');
module.exports = {
// 目标环境为浏览器
target: 'web',
// 前端入口文件
entry: './src/client/index.js',
// 输出配置
output: {
path: path.resolve(__dirname, 'dist/client'),
filename: 'bundle.js',
// 静态资源公共路径
publicPath: '/'
},
module: {
rules: [
{
// 匹配JS文件
test: /\.js$/,
// 排除node_modules目录
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
},
// 开发模式配置
mode: process.env.NODE_ENV === 'production' ? 'production' : 'development'
};后端Node.js代码打包配置
后端代码运行在Node.js环境，不需要处理浏览器兼容问题，同时需要排除Node.js内置模块的打包，避免打包体积过大，配置示例如下：
const path = require('path');
const nodeExternals = require('webpack-node-externals');
module.exports = {
// 目标环境为Node.js
target: 'node',
// 后端入口文件
entry: './src/server/index.js',
// 输出配置
output: {
path: path.resolve(__dirname, 'dist/server'),
filename: 'server.js'
},
// 排除Node.js内置模块和npm包
externals: [nodeExternals()],
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
},
mode: process.env.NODE_ENV === 'production' ? 'production' : 'development'
};多环境打包与脚本配置
可以在package.json中配置不同的打包脚本，区分开发和生产环境，同时合并前后端打包配置：
{
"scripts": {
"build:client": "webpack --config webpack.client.config.js",
"build:server": "webpack --config webpack.server.config.js",
"build": "npm run build:client && npm run build:server",
"build:prod": "NODE_ENV=production npm run build",
"dev:client": "webpack serve --config webpack.client.config.js --mode development",
"dev:server": "nodemon dist/server/server.js"
}
}如果需要同时管理前后端配置，也可以使用webpack-merge工具合并公共配置和差异化配置，减少重复代码。
常见问题与优化建议
- 打包后端代码时务必使用
webpack-node-externals排除npm包，否则会导致打包文件体积过大 - 生产环境打包时可以开启代码压缩，Webpack4及以上版本在production模式下会自动开启JS压缩
- 如果前端项目使用了TypeScript，需要添加
ts-loader和TypeScript相关依赖，调整loader规则即可 - 全栈项目如果包含共享的工具函数，可以单独放在
src/shared目录，前后端配置都包含该目录的解析规则即可复用代码
打包验证
完成配置后执行npm run build命令，会分别在dist/client和dist/server目录生成打包后的文件，前端文件可以直接部署到静态服务器，后端文件可以通过node dist/server/server.js命令启动服务，验证功能是否正常。