create-react-app配置多入口项目开发

本文介绍了如何使用create-react-app搭建react项目,并详细阐述了将webpack配置分离,以及如何修改config目录下的webpack配置文件,包括入口(entry)、出口(output)和HtmlWebpackPlugin的设置,以实现多入口页面的开发。同时,还讲解了修改webpackDevServer.config.js文件来配置路由映射,确保多入口项目正常启动。
摘要由CSDN通过智能技术生成

1. 使用create-react-app脚手架搭建react项目

新建项目文件夹,install create-react-app

npm install -g create-react-app

进入到项目文件夹中:

create-react-app app
cd app

启动项目:

npm start

2. 将项目webpack配置项分离开

npm run eject

此过程对create-react-app是不可逆的过程。
执行完此命令后会在app的目录下生成一个config文件夹,里面有webpack.config.dev.js等文件,具体如下图所示:

config

3. 修改config目录下的webpack.config.dev.js文件

在此项目中我配置四个入口文件,分别是home.html, info.html, user.html, index.html。

a. 修改入口配置:

在webpack.config.dev.js文件中的entry中修改:

注意: 如果entry只有一个入口文件的时候是一个数组,有多个入口文件的时候则改为一个对象

 entry: {
    home: [
      require.resolve('react-e
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值