项目简介

该项目为一个后端项目，该项目仿"知乎"，模拟实现了：

• JWT用户认证、授权模块

• 上传图片模块

• 个人资料模块

• 关注与粉丝模块

• 话题模块

• 问题模块

• 答案模块

• 评论模块

共计45个接口，代码规范遵循RESTful规范。其技术栈为：

• Koa2

• MongoDB

• PM2

• Nginx

• Webpack

项目运行脚本

yarn
# or
npm install# 开发调试
yarn start:dist# 构建打包
yarn build

服务端接口示例

由于CSDN插太多外链，会限制推送，所以放代码块了。该Koa2服务端项目，已被部署至服务器，并使用Nginx进行了请求转发。

// GET 请求用户列表
http://zcwl.work/koa2-zhihu-api/users/find// GET 请求指定用户-该接口允许传参查询
http://zcwl.work/koa2-zhihu-api/users/findById/6367b83658d7e7b08341b189?fields=educations;following;followingTopics;password// GET 查询关注者
http://zcwl.work/koa2-zhihu-api/users/6379de3f7555978c40571de8/following// GET 请求话题列表
http://zcwl.work/koa2-zhihu-api/topics?per_page=30&page=1

下阶段计划

为其开发一个前端项目，进行数据承载

贴上GitHub地址，可以去看看项目源码，麻烦点点星：

https://github.com/Neekky/node-koa2-zhihu

接下来想重点讲讲该项目的webpack配置，我是开发完成后，才集成的webpack，在此将配置过程记录下来。

注：我这里由于是新项目，使用的是webpack5。

npm i -D webpack webpack-cli
# 安装webpack5版本
# 安装webpack-cli3版本 此工具用于在命令行中运行 webpacknpm i -D clean-webpack-plugin
# 常用插件，打包前自动清理之前打包的文件npm i -D webpack-node-externals
# 打包时排除node_modules，里面的所有依赖都不打包npm i -D @babel/core @babel/node @babel/preset-env babel-loader
# 使用es6语法所需的babel相关依赖
# @babel/node在babel7中被移了出来，如果在node环境中使用，要单独安装，有在运行Babel预设和插件之前进行编译的好处，调试用npm i -D terser-webpack-plugin@4
# 生产环境需要打包压缩代码npm i -D webpack-merge
# 分开发配置和生产配置，它们有共同配置，抽离出来，通过webpack-merge合并npm i -D nodemon
# 监控node.js 源代码的变化和自动重启服务npm i -D cross-env
# 运行跨平台设置和使用环境变量的脚本npm i -D npm-run-all
# 实现同时执行多个命令npm i -D rimraf
# 以包的形式包装rm -rf命令，用来删除文件和文件夹的。用来清理dist目录

我们的koa项目分为开发时环境和生产时环境，不同环境时webpack的配置是有部分不同的，所以要新建两个配置文件webpack.config.dev.js 和 webpack.config.prod.js，同时它们又有共同之处，所以需要一个通用配置文件webpack.config.base.js。

所以在项目根目录下新建config文件夹，把这三个webpack配置文件放进去。

项目目录

  koa-demo
+ |- config
+     |- webpack.config.base.js
+     |- webpack.config.dev.js
+     |- webpack.config.prod.js|- package.json|- /src|- index.js

接下来在通用配置文件webpack.config.base.js中配置：

const path = require('path')
const webpack = require('webpack')
const nodeExternals = require('webpack-node-externals')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const webpackConfig = {target: 'node', // koa项目仅在node环境下运行，因此设置称'node'entry: {// 设置入口文件server: path.join(__dirname, '../bin/www.js')},output: {// 设置打包后的文件和位置filename: '[name].bundle.js',path: path.join(__dirname, '../dist')},// devtool: 'inline-source-map',module: {rules: [{test: /\.js|jsx$/,exclude: /(node_modules|bower_components)/,use: {loader: 'babel-loader',options: {presets: ['@babel/preset-env'],plugins: ['@babel/plugin-transform-runtime']}},// 尽量将 loader 应用于最少数量的必要模块，因此设置include// 只针对该目录下的js文件进行babel处理// include: path.join(__dirname, '../')}]},resolve: {// modules: 告诉webpack哪些目录需要搜索去匹配解析modules: [path.join(__dirname, '../bin/www.js'), 'node_modules'],// extensions: 告诉webpack这些后缀文件需要去搜索匹配extensions: ['.js', '.json', '.ts', '.tsx', '.jsx'],alias: {// 设置别名指向对应目录'@': path.join(__dirname, '../src')}},externals: [nodeExternals()], // 排除对node_modules里的依赖进行打包plugins: [new CleanWebpackPlugin(), // 打包前清除输出目录new webpack.DefinePlugin({// 定义环境变量，区分开发和生产环境// 具体详情可查看DefinePlugin文档'process.env.NODE_ENV':process.env.NODE_ENV === 'production'? JSON.stringify('production'): JSON.stringify('development')})],// node下这些选项可以使最初为Node.js环境编写的代码，在其他环境（如浏览器）中运行node: {// console: true,global: true,// process: true,// Buffer: true,__filename: true,__dirname: true,// setImmediate: true,// path: true}
}module.exports = webpackConfig

配置config/webpack.config.dev.js

const { merge } = require('webpack-merge')
const baseConfig = require('./webpack.config.base')// 通过webpack-merge合并基础配置，添加开发时配置
const webpackConfig = merge(baseConfig, {mode: 'development', // 开发模式devtool: 'eval-source-map', // 开发时出错能知道在源代码中哪一行stats: {children: false, // webpack打包时子模块信息设置不显示modules: false // 不显示模块信息}
})module.exports = webpackConfig

配置config/webpack.config.prod.js

const { merge } = require('webpack-merge')
const baseConfig = require('./webpack.config.base')
const TerserPlugin = require('terser-webpack-plugin')// 通过webpack-merge合并基础配置，添加生产时配置
const webpackConfig = merge(baseConfig, {mode: 'production', // 生产模式stats: {children: false, // webpack打包时子模块信息设置不显示warnings: false // 警告不显示},optimization: {minimize: true,minimizer: [// terser-webpack-plugin插件可以压缩代码// 在webpack4版本中需要安装terser-webpack-plugin4版本// 里面是官方推荐的具体的参数，详情可查看文档new TerserPlugin({terserOptions: {compress: {warnings: false,drop_console: false, // 取消注释console 方便有时候进行调试dead_code: true,drop_debugger: true},output: {comments: false, // 不要注释beautify: false // 不要格式，一行显示所有代码},mangle: true},parallel: true, // 使用多进程并行运行可提高构建速度，默认的并发运行数量 os.cpus().length - 1// sourceMap: false})],// splitChunks 用来避免模块之间重复的依赖关系splitChunks: {cacheGroups: {commons: {name: 'commons',chunks: 'initial',minChunks: 3,enforce: true}}}}
})module.exports = webpackConfig

配置babel去支持es6语法

{"presets": [["@babel/preset-env",{"targets": {"node": "current"}}]],"plugins": ["@babel/plugin-transform-runtime"], // 解决 regeneratorRuntime is not defined 错误信息"sourceType": "unambiguous" // 解决ES6和CommonJS模块导出的问题: https://babeljs.io/docs/en/options#sourcetype
}

在package.json增加脚本命令

{"script": {"start": "nodemon --exec babel-node src/index.js","webpack:debug": "node --inspect-brk ./node_modules/.bin/webpack --config config/webpack.config.prod.js --progress","watch": "cross-env NODE_ENV=development webpack --watch --config config/webpack.config.dev.js --progress","debug": "nodemon --inspect dist/server.bundle.js","start:dist": "npm-run-all -p watch debug"}
}

至此，webpack配置就完成啦！

koa项目集成webpack参考链接：掘金：webpack打包koa项目配置解析