Create-React-App的Webpack配置

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

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

随着工程的扩大,单页面应用已经不能适应工程开发的需要了,而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: {
        mainPage:[
            require.resolve('./polyfills'),
            require.resolve('react-dev-utils/webpackHotDevClient'),
            paths.appIndexJs,
        ]
        ,
        registerPage: [
            require.resolve('./polyfills'),
            require.resolve('react-dev-utils/webpackHotDevClient'),
            paths.registerJS
        ],
    },
    output: {
        filename: 'static/js/[name].js',
        publicPath: publicPath,
        // Point sourcemap entries to original disk location (format as URL on Windows)
        devtoolModuleFilenameTemplate: info =>
            path.resolve(info.absoluteResourcePath).replace(/\\/g, '/'),
    },

很简单,很容易理解。

除此之外还需要进行修改的就是HtmlWebpackPlugin。
这里写图片描述
对参数进行一下讲解:
inject参数,是否向目标html末尾添加< script >标签,若添加,添加的src为chunks中所提到的文件(即上文说的那个入口)
filename参数,生成的目标文件的名称。
template参数,模板的目录。

添加path

这里写图片描述

修改或添加路径直接修改path就可以

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值