react多页面配置

配置create-react-app创建的项目为多页面

现在在做公司的管理系统， 普通用户管理系统已经做得差不多了，需要一个超级管理后台，功能可在普通用户管理之上增加修改即可， 但是需要另外一个入口做区别，所以需要将 create-react-app创建的react项目 该为多入口。
下面记录下集体实现的步骤：

1. 当然是 弹出 隐藏的 webpack配置

yarn eject 

执行后，会多出一个config 文件夹， 我们配置 webpack.config.js 文件

image.png

2. 新建一个 admin.js 作为超级管理后台入口，和AppAdmin.js 作为输出

image.png
image.png
image.png

3. 在paths.js里面导出新增一个变量

image.png

4. 修改入口

//原配置
        entry: [
                isEnvDevelopment &&
                require.resolve('react-dev-utils/webpackHotDevClient'),
                paths.appIndexJs,
            ].filter(Boolean),
        ],
//修改后配置
        entry: {
            main: [
                isEnvDevelopment &&
                require.resolve('react-dev-utils/webpackHotDevClient'),
                paths.appIndexJs,
            ].filter(Boolean),
            admin: [
                paths.appAdminJs,
            ].filter(Boolean)
        },
// 说明：
// main是原来的入口
// admin是新增的入口

5. 修改出口 只需将filename那项改为[name].bundle.js, 其余不改

        output: {
            path: isEnvProduction ? paths.appBuild : undefined,
            pathinfo: isEnvDevelopment,
            filename: isEnvProduction
                ? 'static/js/[name].[contenthash:8].js'
                : isEnvDevelopment && 'static/js/[name].bundle.js',  //这里原来是bundle.js 现在改为 [name].bundle.js
            futureEmitAssets: true,
            chunkFilename: isEnvProduction
                ? 'static/js/[name].[contenthash:8].chunk.js'
                : isEnvDevelopment && 'static/js/[name].chunk.js',
            publicPath: publicPath,
            devtoolModuleFilenameTemplate: isEnvProduction
                ? info =>
                    path
                        .relative(paths.appSrc, info.absoluteResourcePath)
                        .replace(/\\/g, '/')
                : isEnvDevelopment &&
                (info => path.resolve(info.absoluteResourcePath).replace(/\\/g, '/')),
        },

6.修改plugins 的htmlWebpackPlugin

//原来的代码：
new HtmlWebpackPlugin(
                Object.assign(
                    {},
                    {
                        inject: true,
                        template: paths.appHtml,
                    },
                    isEnvProduction
                        ? {
                            minify: {
                                removeComments: true,
                                collapseWhitespace: true,
                                removeRedundantAttributes: true,
                                useShortDoctype: true,
                                removeEmptyAttributes: true,
                                removeStyleLinkTypeAttributes: true,
                                keepClosingSlash: true,
                                minifyJS: true,
                                minifyCSS: true,
                                minifyURLs: true,
                            },
                        }
                        : undefined
                )
            ),

//修改后的代码：
            new HtmlWebpackPlugin(
                Object.assign(
                    {},
                    {
                        inject: true,
                        template: paths.appHtml,
                        chunks: ['main'],  //表示载入main开头的chunk.js文件
                    },
                    isEnvProduction
                        ? {
                            minify: {
                                removeComments: true,
                                collapseWhitespace: true,
                                removeRedundantAttributes: true,
                                useShortDoctype: true,
                                removeEmptyAttributes: true,
                                removeStyleLinkTypeAttributes: true,
                                keepClosingSlash: true,
                                minifyJS: true,
                                minifyCSS: true,
                                minifyURLs: true,
                            },
                        }
                        : undefined
                )
            ),
          //新增 admin页面的设置
            new HtmlWebpackPlugin(   
                Object.assign(
                    {},
                    {
                        inject: true,
                        template: paths.appHtml,  //和main页面使用一个html模板
                        filename: 'admin.html', //生成的名字是 admin.html
                        chunks: ['admin']  //表示载入admin开头的chunk.js文件
                    },
                    isEnvProduction
                        ? {
                            minify: {
                                removeComments: true,
                                collapseWhitespace: true,
                                removeRedundantAttributes: true,
                                useShortDoctype: true,
                                removeEmptyAttributes: true,
                                removeStyleLinkTypeAttributes: true,
                                keepClosingSlash: true,
                                minifyJS: true,
                                minifyCSS: true,
                                minifyURLs: true,
                            },
                        }
                        : undefined
                )
            ),

然后就配置完成了，运行yarn start

结果：

通过 localhost:3000 访问main页面

image.png

通过localhost:3000/admin.html 访问超级管理页面

image.png