皇冠新体育APP

IT技术之家

Koa2仿知乎服务端项目:Webpack配置_Neeky Ceng

披露时候:2023-08-24 14:59:11 大数据 40次 标签:node.js nginx koa2 mongodb 皇冠新体育APP:webpack Powered by 金山文档
使用Koa2、MongoDB,开发仿知乎的服务端项目...

项目简介

该类目为一款后面项目流程,该类目仿"zhihu",模拟系统实行了:
  • JWT手机用户资格认证、授权书功能
  • 上传文件产品图片引擎
  • 个材质 控制模块
  • 瞩目与受众组件
  • 热点模组
  • 疑问组件
  • 4.答案信息模块
  • 评价电源模块

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

  • Koa2
  • MongoDB
  • PM2
  • Nginx
  • Webpack

    项目运行脚本

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

    服务端接口示例

    在CSDN插不多外部链接,会限定消息推送,因而放二维码块了。该Koa2产品端产品,已被投放至产品器,并操作Nginx参与了ajax请求群发。
    // GET 请求用户列表
    //zcwl.work/koa2-zhihu-api/users/find
    
    // GET 请求指定用户-该接口允许传参查询
    //zcwl.work/koa2-zhihu-api/users/findById/6367b83658d7e7b08341b189?fields=educations;following;followingTopics;password
    
    // GET 查询关注者
    //zcwl.work/koa2-zhihu-api/users/6379de3f7555978c40571de8/following
    
    // GET 请求话题列表
    //zcwl.work/koa2-zhihu-api/topics?per_page=30&page=1

    下阶段计划

    为其开发技术一名网页前端内容,做出信息乘载

    贴上GitHub网址,可看来品牌源码,问题小红点星: //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模块导出的问题: //babeljs.io/docs/en/options#sourcetype
    }
    
    在package.json延长游戏脚本ftp命令
    {
      "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新活动安装详细分析