Webpack4不求人(2) ——手把手搭建TypeScript+React16+ReactRouter5同构应用脚手架

同构应用

使用同一份应用代码，同时提供浏览器环境和服务器环境下的应用，解决传统浏览器单页应用的两个顽固问题：

• 不利于SEO，浏览器环境代码是在客户端渲染，大部分爬虫都只能爬到一个空白的入口文件
• 代码在浏览器渲染，低端机可能会卡顿

接下来我们一起从零开始搭建基于Webpack的React同构应用脚手架。

SSR流程

1. Web应用构建完成后输出CSS、JS和HTML
2. SSR应用构建完成后输出一个CommonJs模块文件，可以将虚拟DOM在服务端渲染为HTML字符串
3. Node.js新建HTTP服务器，收到请求后调用SSR模块导出的render函数输出HTML到客户端

初始化项目

mkdir react-ssr-example
cd react-ssr-example
yarn init -y

yarn add webpack webpack-cli webpack-dev-server -D # 安装Webpack
yarn add react react-dom react-router-dom # 安装React
yarn add @types/react @types/react-dom @types/react-router-dom -D # 安装React声明文件
yarn add express # 安装express
yarn add css-loader sass-loader node-sass mini-css-extract-plugin # 安装CSS相关模块
yarn add ts-loader typescript # 安装TypeScript
yarn add html-webpack-plugin # 安装HTML处理插件

目录结构

脚手架的完整目录如下：(这些文件一步步都会有)

|----build # 构建结果目录
        |----styles # 样式
                |----main.css
        |----bundle.ssr.js # SSR应用文件
        |----bundle.web.js # Web应用文件
        |----index.html # Web应用入口HTML
|----src # 应用源码
        |----home # 首页组件
                |----index.scss # 首页SCSS
                |----index.tsx # 首页组件
        |----signin # 登录页组件
                |----index.scss # 登录页SCSS
                |----index.tsx # 登录页组件
        |----App.tsx # 应用路由设置
        |----index.html # Web应用入口HTML
        |----main.ssr.tsx # SSR入口文件
        |----main.web.tsx # Web入口文件
|----index.js #　express服务器入口
|----package.json
|----tsconfig.json # TypeScript配置文件
|----webpack.config.js # Web应用webpack配置
|----webconfig.ssr.config.js # SSR应用Webpack配置

工具配置

1.TypeScript配置，新建tsconfig.json

{
    "compilerOptions": {
      "target": "es5", 
      "module": "commonjs", 
      "jsx": "react", 
      "strict": true,
      "lib": [
        "DOM"
      ],
      "esModuleInterop": true
    },
    "include": [
      "./src/**/*.ts&