Create-React-App的Webpack配置

最新推荐文章于 2024-06-24 10:56:22 发布

原创最新推荐文章于 2024-06-24 10:56:22 发布 · 1.3w 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#WebPack #react

前端开发专栏收录该内容

19 篇文章

订阅专栏

当单页面应用无法满足复杂开发需求时，需要对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参数，模板的目录。