Create-React-App的Webpack配置

当单页面应用无法满足复杂开发需求时,需要对create-react-app进行改造。通过`npm run eject`,我们可以访问到配置文件。主要修改`webpack.config.js`的entry和output,以及HtmlWebpackPlugin配置,实现多入口多出口。entry和output定义入口和输出,HtmlWebpackPlugin的inject和filename参数控制脚本注入和目标HTML文件名。
摘要由CSDN通过智能技术生成

随着工程的扩大,单页面应用已经不能适应工程开发的需要了,而create-react-app默认生成的是单出口单入口生产环境,所以我们需要对我们的工程做出一些修改来符合当前的开发进度。

工程修改

前置工作

在工程目录下,输入npm run eject,工具会给出提示,提示eject为不可恢复操作,输入y或者y开头的单词,即可进行eject。
eject后,会在目录下发现几个新增的目录 => config,script。
script的内容为脚手架自己生成的,现在不需要进行更改,我们只需要更改config中的内容即可实现多入口多出口。

修改配置文件

配置文件如下:
这里写图片描述
很容易就可以看出,webpack.config有两个,一个是dev(开发)环境下的配置文件,一个为prod(生产环境下,即npm run build的配置文件)环境下的配置文件。paths为各种路径,我们可以在这个文件中添加我们自己的路径。
需要修改的内容其实没多少,主要集中在entry入口跟output出口。

entry: {
        
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值