Koa+React+Webpack环境配置
1. 初衷
最近,因疫情在家写了一些东西.想到之前去实习的时候,公司用的Nodejs做中间层,实现数据格式的处理,请求转发,SSR等功能,想自己也折腾下这么个东西,刚好最近或多或少的学了一些Webpack,就从webpack搭一个Koa作为中间层,页面路由,同时使用React的这么一个脚手架吧,只是一个自己的玩具吧,哈哈哈哈.
2. 使用中间层的作用
我理解的几个nodejs的作用
- 整合后端接口和接口转发:比如一个功能需要多个不同的接口,可以先把请求打到Node层,通过Node层去访问多个Java接口,之后将多个接口数据进行拼接即可.
- 解决跨域问题:如果直接使用浏览器发起http请求到后端,会存在跨域问题,使用nodejs获取数据,可以绕过跨域问题(本文进行实践)
- 利于SEO:利用Node层实现模板渲染功能,有利于SEO(第二部分进行实践)
3. 搭建Koa2+React+Webpack开发环境
看了网上一些文章,其实自己对于中间层有点迷糊,这里的想法是利用Koa的模板渲染功能,在渲染的时候加载打包的React页面的js文件,通过打包的js文件实现模板渲染react页面(但是不知道这个是怎么实现SSR的),请教网上各位大佬,谢谢大家了.
因此上述项目的本质上还是一个koa的项目,使用koa2的脚手架搭建一个koa2的后端环境.
1. 项目目录
- 创建一个build文件夹,在下面创建一个webpack.config.dev.js用于配置webpack的打包配置
- 创建一个client文件夹,下面主要存放页面
- routes主要用于koa的路由,api接口和页面的渲染功能
- views主要是渲染页面的模板
- public中的javascript主要用于存放打包的页面js,这个publick页面是koa中配置的静态路径的根目录,之后通过页面加载的静态资源文件(打包完毕的js文件都放在这里,之后网页加载的时候通过静态资源进行加载)
2. Webpack环境配置
1. 依赖安装
- babal相关
- babel-loader
- babel-polyfill
- @babel/core
- @babel/plugin-transform-runtime
- @babel/preset-env
- @babel/preset-react
- @babel/runtime
- @babel/runtime-corejs3
- 其他loader
- css-loader
- style-loader
- file-loader
- url-loader
- 其他插件
- html-webpack-plugin
- clean-webpack-plugin
2. babel和loader的常规配置
module: {
rules: [
{
test: /\.jsx?/,
loader: "babel-loader",
options: {
presets: ["@babel/preset-env", "@babel/preset-react"],
plugins: [
[
"@babel/plugin-transform-runtime",
{
corejs: 3
}
]
]
},
exclude: /node_modules/
},
{
test: /\.css/,
loader: ["style-loader", "css-loader"],
exclude: /node_modules/
},
{
test: /\.(png|jpg|gif|jpeg|webp|svg|eot|ttf|woff|woff2|ico)$/,
use: [
{
loader: "url-loader",
options: {
limit: 10240, //
esModule: false
}
}
],
exclude: /node_modules/
}
]
},
注意的点: css-loader和style-loader的顺序,执行的时候是倒序出栈执行的,所以要反着配置
3. 多页面配置
配置考虑如下问题
- 应该每个页面是多入口的情况,如果要配置多个入口
- 多个入口的文件会引用共有库,例如React,所以在打包的时候应该优化,分离打包公用包
- 使用html-webpack-plugin生成模板页面,通过koa中的ctx.render方法进行渲染,因此需要配置多生成html文件,仅加载该文件中用到的打包的js文件
4. 公共包Chunk的打包过程:
这里的name,指定了打包得到的公共包的chunkName这里的vendor,之后在配置html-webpack-plugin的时候按照chunkName进行打包的时候可以配置为vendor
optimization: {
splitChunks: {
cacheGroups: {
commons: {
name: "vendor",
chunks: "all"
}
}
}
}
5. 多文件入口和html-webpack-plugin配置
这里就是将client下面的目录文件夹配置成对应的页面入口,动态加载多页面和打包html的配置
const fs = require("fs");
const getEntryDir = () => {
const dir = fs.readdirSync(path.resolve(__dirname, "../client/"));
let entry = {
};
let webpackPlugins = [];
dir.forEach(item =>