React多页应用配置🥷自救指南

Date: May 24, 2023
Tags: React
写完了吗: Done

前言

目前，大多数时候前端项目是单页应用，只有一个index.html文件。然而，有些时候我们需要使用到多页应用，即多个html文件。

比如，笔者有一个PC端项目，后期迭代时需要支持移动端，由于交互功能一致，但是UI变化大，不合适采用自适应布局的开发方式。因此将移动端组件重写，提取相同的JS公用，将移动端页面打包成h5.html访问，PC端仍是index.html访问。这就涉及到了打包时的多页配置。

多页配置方案

使用CRA脚手架创建的react项目，无法灵活地配置webpack，如果我们想要修改配置，可以采用2种方案。

1. 使用eject命令将配置文件完全弹射出来，由开发者自由地修改，但是该操作是不可逆的，需谨慎操作。

   弹射出的webpack文件包含scripts与config文件夹，其中scripts内包含dev/build/test等脚本命令js，config就是webpack的相关打包js。

   其中，调整多页配置，在config中的paths.js与webpack.config.js中修改。

   // paths.js
   module.exports = {
   	// ...
   	+++ appH5Js: resolveModule(resolveApp, 'src/h5/index'),
   }
   

   // webpack.config.js
   // 修改入口文件，出口文件以及html插件
   entry: {
   	main: paths.appIndexJs,
   	+++ admin: paths.appH5Js,
   },
   output: {
   	// ...,
   	filename: isEnvProduction
   		? 'static/js/[name].[contenthash:8].js
   		--- : isEnvDevelopment && 'static/js/bundle.js',
   		+++ : isEnvDevelopment && 'static/js/[name].bundle.js',
   }
   

   修改这2份文件即可完成配置，是不是超级简单吶😬😬

2. 使用craco等工具，优雅地重写配置。

craco多页配置

笔者也是在实际项目中使用了craco。

• 参考文章：
  • 无 eject 重写 CRA 配置 — Craco 详解。
  • 官方文档craco

首先，在项目目录最外层新增craco.config.js文件，采用module.exports导出配置对象，其中有一个属性webpack，里面包含了关于webpack的相关配置，这里就是主战场。

// craco.config.js
module.exports = {
  // ...
  webpack: {
    alias: { /* ... */ },
    plugins: {
      add: [ /* ... */ ],
      remove: [ /* ... */ ],
    },
    configure: { /* ... */},
    configure: (webpackConfig, { env, paths }) => {
      /* ... */
      return webpackConfig;
    },
  },
};

其中，configure是一个函数也可以是对象。当采用对象覆盖无法完成的配置，可以在函数内完成覆盖。经过笔者实操，建议按下方配置一样采用函数写法，避免过多验证浪费表情😖😖。

例如本次需要修改的多页应用配置。

1. 在entry下新增入口文件，新增h5/index.js打包入口。

   module.exports = {
   	webpack: {
   		//...
   		configure(webpackConfig, {env, paths}){
   			webpackConfig.entry = {
   				main: paths.appIndexJs,
   				h5: path.resolve(__dirname, 'src/h5/index')
   			};
   
   			return webpackConfig;
   		}
   	}
   }
   
   

   • env：当前的NODE_ENV（development,production,etc.）
   • paths：包含了所有CRA使用的路径

2. 修改output配置，以文件名作为打包后js的文件名。

   module.exports = {
   	webpack: {
   		//...
   		configure(webpackConfig, {env, paths}){
   			webpackConfig.ouput = {
   				...webpackConfig.output,
   				filename: 'static/js/[name].bundle.js'
   			}
   
   			return webpackConfig;
   		}
   	}
   }
   

   output下还有其它旧配置，解构赋值，新增配置覆盖旧配置。

3. 新增HTML配置，使用HtmlWebpackPlugin插件将打包生成的js/css文件注入到h5.html。

   module.exports = {
   	webpack: {
   		//...
   		plugins: [
   			new HtmlWebpackPlugin(
   				{
   					inject: true,
   					filename: 'h5.html',
   					chunks: ['h5'],
   				}
   			),
   		]
   	}
   }
   

   这里关于HtmlWebpackPlugin的配置还有许多，其中template不写，默认是index.html。

注意：CRA中的new HtmlWebpackPlugin配置中没有chunks项，表明打包产物都会注入到index.html中。如果不想h5相关资源注入到index.html中，可以遍历plugins找到HtmlWebpackPlugin的实例，明确chunks的值，确保index.html中只注入main相关资源。

module.exports = {
	webpack: {
		//...
		configure(webpackConfig, {env, paths}){
			webpackConfig.plugins.map(item => {
				if(item instanceof HtmlWebpackPlugin){
					if(!item.userOptions.chunks){
						item.userOptions.chunks = ['main'];
					}
				};
				return item;
			})
			return webpackConfig;
		}
	}
}

webpackConfig是所有关于webpack的配置，可以通过console.log输出配置的所有内容，了解当前的配置，调整对应配置项。

完整的配置：

// craco.config.js
module.export={
	webpack: {
		...,
		configure(webpackConfig, {env, paths}){
			webpackConfig.entry = {
				main: paths.appIndexJs,
				h5: path.resolve(__dirname, 'src/h5/index')
			};
			webpackConfig.output = {
				...webpackConfig.output,
				filename: 
			};
			// 
			webpackConfig.plugins.map(item => {
				if(item instanceof HtmlWebpackPlugin){
					if(!item.userOptions.chunks){
						item.userOptions.chunks = ['main'];
					}
				};
				return item;
			});
			// 最后返回更新后的config
			return webpackConfig;
		}
	}
}

注意：

1. entry/output对象是直接覆盖旧配置，因此需要把旧配置解构赋值，新配置放在末尾覆盖旧配置。entry下没有其它配置，所以不需要解构旧配置。
2. 旧配置中有HtmlWebpackPlugin的配置，其中template未配置，默认是以src/index.html为模板文件生成index.html；其中chunks未配置，默认是将所有打包后的js/css都注入到index.html中。为了将对应的js/css注入到对应的html文件中，需添加chunks配置。

End.