koa学习笔记：利用Webpack4+Koa2+React搭建开发框架

最新推荐文章于 2024-08-24 07:27:35 发布

月半叫做胖

最新推荐文章于 2024-08-24 07:27:35 发布

阅读量1.1k

点赞数

分类专栏： Koa笔记文章标签： koa webpack react 框架搭建

本文链接：https://blog.csdn.net/qq_24724109/article/details/103499735

版权

本文详细介绍了如何利用Webpack 4、Koa2和React搭建一个开发框架，包括Webpack的配置、前端打包、Koa2服务器配置、React前端实现以及使用session来记住用户名和密码的方法。在Koa2配置中，讨论了路由、控制器和数据库交互，而在React部分则涉及登录页面的创建。完整代码可在GitHub上查阅。

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

11. 使用Webpack 4，Koa2和React搭建开发框架

1. Webpack配置

1. 脚本配置

// package.json
"scripts": {
   
    "server": "node ./server/index.js",
    "dev_fro": "webpack-dev-server --config ./frontend/build/webpack.dev.js --mode development --open",
    "pro_fro": "webpack --config ./frontend/build/webpack.prod.js --mode production",
    "dev_server": "npm run server & npm run dev_fro",
    "init_table": "node ./init/utils/init.js"
  },

webpack打包配置啥

页面打包配置
本地调试配置webpack-dev-server
使用loader和modules的配置

2. 前端打包配置

1. 页面配置

webpack开发者模式和生产环境分离

// webpack.common.js
const {
    CleanWebpackPlugin } = require('clean-webpack-plugin');
const path = require('path');

module.exports = {
   
  entry: {
   
    // 三个页面入口
    index: path.resolve(__dirname, '../src/page/index.tsx'),
    login: path.resolve(__dirname, '../src/page/login.tsx'),
    error: path.resolve(__dirname, '../src/page/error.tsx')
  },
  mode: 'development',
  resolve: {
    extensions: ['.tsx', '.js', '.ts'] },
  module: {
   
    rules: [
      {
   
        // 添加typescript 转换器
        test: /\.tsx?$/,
        loader: 'ts-loader',
        exclude: /node_modules/
      },
      {
   
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
   
        // 添加scss转换器
        test: /\.s(a|c)ss/,
        use: ['style-loader', 'css-loader', 'sass-loader']
      },
      {
   
        // 对于react进行babel转义
        test: /\.jsx$/,
        exclude: /(node_modules)/,
        use: {
   
          loader: 'babel-loader',
          options: {
   
            presets: [
              [
                '@babel/preset-env',
                {
   
                  targets: {
   
                    node: '10'
                  }
                }
              ],
              '@babel/preset-react'
            ]
          }
        }
      }
    ]
  },
  plugins: [new CleanWebpackPlugin()],
  output: {
   
    filename: '[name].bundle.js',
    // 将打包完的js文件导入到server中，在koa2渲染的view中进行引用即可
    path: path.resolve(__dirname, '../../server/static/js')
  },
  optimization: {
   
    splitChunks: {
   
      cacheGroups: {
   
        // 将打包的公共部分进行提取
        // 打包得到的name为vendor
        commons: {
   
          test: /[\\/]node_modules[\\/]/,
          name: 'vendor',
          chunks: 'all'
        }
      }
    }
  }
};

//webpack.dev.js
const merge = require('webpack-merge');
const common = require('./webpack.common');
const webpack = require('webpack');
const path = require('path');

module.exports = merge(common, {
   
  devtool: 'inline-source-map',
  devServer: {
   
    contentBase: path.resolve(__dirname, '../../server/static/js'),
    hot: true
  },
  mode: 'development',
  plugins: [
    new webpack.NamedChunksPlugin(),
    new webpack.HotModuleReplacementPlugin()
  ]
});

// webpack.prod.js
const merge = require('webpack-merge');
const common = require('./webpack.common');
const TerserPlugin = require('terser-webpack-plugin');

module.exports = merge(common, {
   
  mode: 'production',
  optimization: {
   
    minimize: true,
    minimizer: [new TerserPlugin()]
  }
});

Notes:

unify-webpack-plugin因为不支持es6 ，这里通过terserPlugin来进行js压缩

通过webpack-merge合并多个config

2. Koa2-React基础配置

1. Koa2 Server配置

1. 目录信息

在这里插入图片描述

2. 入口文件配置

// index.js
const Koa = require('koa');
const view = require('koa-views');
const path = require('path');
const static = require('koa-static');
const session = require('koa-session2');
const Store = require('./models/redis');
const koaBody = require('koa-body');

const router = require('./routes/index');

const app = new Koa();

app.use(view(path.resolve(__dirname, './views/')), {
   
  extension: 'ejs'
});

// 配置session中间件
app