// webpack.server.js
const path = require('path')
const nodeExternals = require('webpack-node-externals')
module.exports = {
target: 'node', // 确定打包的是服务端的代码
mode: 'development',
entry: './src/index.js', // 入口
output: { // 打包的文件要放在哪里去
filename: 'bundle.js', // 打包之后起的名字
path: path.resolve(__dirname, 'build') // 打包过后将文件放在哪个目录下
},
externals: [nodeExternals()], // 依靠node_modules中的文件还需要引入这个包,避免打包警告
module: { // 打包过程中配置的规则
rules: [{
test: /\.js?$/, // 检测以JS结尾的文件
loader: 'babel-loader', // 语法的编译器 使用需要安装
exclude: '/node_modules/', // 一些外部文件不需要编译
options: { // 配置额外的配置项
presets: ['react', 'stage-0', ['env', {
targets: { // babel编译的时候会去兼容浏览器最后两个版本
browsers: ['last 2 versions']
}
}]] // 使用babel-loader的时候,可以使用presets配置一些编译的规则 需要安装
}
}]
}
}
执行 webpack --config webpack.server.js
//package.json
{
"name": "react-server",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "node ./build/bundle.js" // 执行上方命令生成的文件
},
"author": "",
"license": "ISC",
"dependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"express": "^4.17.1",
"react": "^17.0.2",
"webpack": "^5.64.4",
"webpack-cli": "^4.9.1",
"webpack-node-externals": "^3.0.0"
},
"devDependencies": {
"@babel/preset-react": "^7.16.0"
}
}