webpack学习笔记（五）：webpack5+express+react+mongoose这是webpack学习笔记系

前言

这是webpack学习笔记系列的第五篇文章，前面四篇文章，请戳这里：

webpack学习笔记(一)：初次见面，请多指教
webpack学习笔记(二)：基本属性管理
webpack学习笔记(三)：环境配置
webpack学习笔记(四)：webpack5+react 在这篇文章中，我们将利用第四篇笔记的项目作为基础项目，搭建完整的全栈项目配置模板。先来看看，我们的技术选型：
项目的后端服务器搭建，选择的是express
项目中的数据库，选择的是mongoDB，并且采用mongoose操作数据库
项目前端的搭建，选择的是react
项目工程的打包，选择使用webpack5

其实工程和搭建需求

起始工程模板

在说明项目的搭建流程之前，我们先来看一看第四篇文章搭建的工程是怎样的。该项目的基本信息在其package.json文件中，文件内容如下：

{
  "name": "webpack-react-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack-dev-server --config config/webpack.dev.config.js",
    "build": "webpack --config config/webpack.prod.config.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.14.3",
    "@babel/plugin-transform-runtime": "^7.14.3",
    "@babel/preset-env": "^7.14.4",
    "@babel/preset-react": "^7.13.13",
    "babel-loader": "^8.2.2",
    "clean-webpack-plugin": "^4.0.0-alpha.0",
    "css-loader": "^5.2.6",
    "happypack": "^5.0.1",
    "html-webpack-plugin": "^5.3.1",
    "mini-css-extract-plugin": "^1.6.0",
    "open-browser-webpack4-plugin": "^1.0.0",
    "sass-loader": "^12.0.0",
    "webpack": "^5.38.1",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.2",
    "webpack-merge": "^5.7.3"
  },
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  }
}

在这段代码中可以得到如下信息：

开发时用的服务器是webpack自带的webpack-dev-server
该项目完成了基本的babel配置
该项目的开发环境和生产环境是分开的，运行时需要的script命令分别是npm run dev和npm run build
该项目可以加载CSS资源

希望得到的结果

利用express+webpack-dev-middleware代替webpack-dev-server做开发服务器
react项目可以实现热替换
利用express+mongoose搭建后台服务器
nodemon启动后台服务器，方便实时更新
scripts命令实现前后台打包、运行、开发等命令分离

搭建过程

替换webpack-dev-server
实现这个替换很简单，具体来讲就是去掉和dev-server相关的；然后，安装express和webpack-dev-middleware并且编写servser.js文件即可

卸载webpack-dev-server：

npm uninstall webpack-dev-server

删除./webpack.config.js中的webpack-dev-server相关配置，具体是如下的代码：

 devServer: {
    contentBase: concatPath('../app'),
    historyApiFallback: false,
    hot: false,
    host: '0.0.0.0',
    port: PORT,
},

安装express和webpack-dev-middleware

npm install --save-dev webpack-dev-middleware

// 这里的 express 需要用到两个地方，一个是前端开发服务器，还有一个是后端的开发服务器，因此不能安装到开发以来里面。
npm install --save express

在根目录下面添加./server.js:

const express = require('express');
const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');

const app = express();
const config = require('./webpack.config.js');
const compiler = webpack(config);

// 告知 express 使用 webpack-dev-middleware，
// 以及将 webpack.config.js 配置文件作为基础配置。
app.use(
  webpackDevMiddleware(compiler, {
    publicPath: config.output.publicPath,
  })
);

// 将文件 serve 到 port 3000。
app.listen(3000, function () {
  console.log('Example app listening on port 3000!\n');
});

react热替换
react热替换的过程主要包含以下三个步骤：

安装相关插件

npm install --save react-router react-router-dom
npm install --save-dev webpack-hot-middleware react-hot-loader

更改配置文件在./server.js文件中添加

const webpackHotMiddleware = require('webpack-hot-middleware');
app.use(webpackHotMiddleware(compiler))

更改./webpack.config.js入口

entry: {
    index: [
      'react-hot-loader/patch',
      'webpack-hot-middleware/client',
      'babel-polyfill',
      './src/index.js'
  ],
  vendor: ['react', 'react-dom']
  },

在./webpack.config.js文件中添加新引用的插件：

plugins: [
    new webpack.HotModuleReplacementPlugin(),
],

在./index.js文件中接收热替换
在./index.js中添加：

if(module.hot){
    module.hot.accept()
}

express后台搭建
express搭建后台服务器，引入express包，然后添加如下代码即可：

import express from 'express'

// 创建后台服务器应用
const app =  new express()

// 监听端口
app.listen(3030, (err) => {
    if(err){
        console.log('err:', err)
    } else {
        console.info(`===> api server is running at loaclhost:3030`)
    }
})

// 端口测试
app.get('/test', (req,res) => {
    res.send('api 服务器创建成功！！！')
})

然后根据需求添加必要的插件以及访问特定路由需要执行的操作。

nodemon启动后台
只需要安装nodemon，然后更改启动命令即可
```
npm install --save-dev nodemon
```

scripts命令编写
这里需要实现，开发环境和生产环境的分离，然后在package.json文件中添加如下命令：

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "watch-client": "cross-env NODE_ENV=development node ./server/index.js",
    "watch-client-prod": "cross-env NODE_ENV=production node ./server/index.js",
    "start-dev-api": "nodemon --watch server/api server/api/index.js",
    "build-client": "cross-env NODE_ENV=production webpack --config webpack.prod.js",
    "dev": "npm run watch-client & npm start-dev-api",
    "build": "npm run build-client & npm run watch-client-prod & npm run start-dev-api"
  },

这样就可以实现用npm命令来进行项目的运行、打包、编译等操作了。

敲黑板，划重点

在最后，这个过程中有几个需要注意的地方

前端的开发服务器和后端的服务器不是同一个，要区分开
开发环境和生产环境需要分开：开发环境需要解决的问题是如何能够方便开发和调试；生产环境需要解决的问题是项目优化问题
nodemon主要是方便后台开发和调试的，和前端的服务器没有任何关系，不能混为一谈