react MPA 多頁配置

create-react-app 默認建立的是 SPA 應用，隨着代碼量的增長，build 後的 js 文件會愈來愈大。網上有不少拆分大的 js 文件的方案，但其實把 SPA 拆分紅 MPA 也何嘗不是一種解決方案。下面是 react 多頁面配置過程，以備忘。

1、建立工程

create-react-app react-mpa
複製代碼

2、eject 配置文件

yarn eject
複製代碼

測試下 eject 是否正常 yarn start

3、配置頁面

① 修改 webpack entry

entry: {
      index:[
        isEnvDevelopment && require.resolve('react-dev-utils/webpackHotDevClient'),
        paths.appIndexJs,
      ].filter(Boolean)
    },
複製代碼

② 修改 webpack output

output: {
    filename: isEnvProduction
        ? 'static/js/[name].[contenthash:8].js'
        : isEnvDevelopment && 'static/js/[name].js',
}
複製代碼

③ 修改 HtmlWebpackPlugin

{
  inject: true,
  template: paths.appHtml,
  // 新增
  filename: 'index.html',
  chunks: ['index'],
}
複製代碼

測試下項目工程是否正常運行 yarn start

4、增長頁面

一、新建頁面所需文件

① 新建 html 頁面

複製 public/index.html 爲 public/index2.html
複製代碼

② 新建 js 文件

複製 src/index.js 爲 src/index2.js
複製 src/App.js 爲 src/App2.js
複製代碼

③ 增長文件引用(config/paths.js)

二、webpack 配置

① 增長 entry 配置

② 增長 HtmlWebpackPlugin 配置

運行工程 yarn start

測試頁面 http://localhost:3000/index.html http://localhost:3000/index2.html

倉庫地址 github.com/lifefriend/…