Create-React-App的Webpack配置

随着工程的扩大，单页面应用已经不能适应工程开发的需要了，而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就可以