Koa2仿知乎服务端项目：Webpack配置

置顶 Neeky Zeng

已于 2023-01-17 14:15:50 修改

阅读量1.8k

点赞数 2

分类专栏：后端项目开发 Node 文章标签： node.js nginx koa2 mongodb webpack Powered by 金山文档

于 2023-01-17 10:02:35 首次发布

本文链接：https://blog.csdn.net/qq_28766729/article/details/128712384

版权

项目开发同时被 3 个专栏收录

5 篇文章 0 订阅

订阅专栏

后端

1 篇文章 0 订阅

订阅专栏

Node

1 篇文章 0 订阅

订阅专栏

该项目是一个仿知乎的后端应用，包括用户认证、上传图片等45个接口，使用Koa2、MongoDB等技术栈。文章详细介绍了如何集成Webpack5，包括安装依赖、配置开发和生产环境的Webpack设置，以及Babel的使用，最后提供了项目GitHub地址和Webpack配置的详细步骤。

摘要由CSDN通过智能技术生成

项目简介

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

JWT用户认证、授权模块

上传图片模块

个人资料模块

关注与粉丝模块

话题模块

问题模块

答案模块

评论模块

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

Koa2

MongoDB

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版本 此工具用于在命令行中运行 webpack

npm 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项目配置解析