在webpack中设置初始化loading

项目基于create-react-app脚手架，所以先创建项目，然后npm run eject在config文件目录下加入loading；

1、在plugins的html模版中添加变量

    new HtmlWebpackPlugin(
                Object.assign(
                    {},
                    {
                        inject: true,
                        template: paths.appHtml,
                        // 初始化加载loading
                        // loading: {
                        //     html: `<h1 style="display: flex;width:100vw;height:100vh;justify-content: center;align-items: center;margin-top: -27vh;overflow: hidden;">LOADING...</h1>`
                        // }
                    },
                    isEnvProduction
                        ? {
                            minify: {
                                removeComments: true,
                                collapseWhitespace: true,
                                removeRedundantAttributes: true,
                                useShortDoctype: true,
                                removeEmptyAttributes: true,
                                removeStyleLinkTypeAttributes: true,
                                keepClosingSlash: true,
                                minifyJS: true,
                                minifyCSS: true,
                                minifyURLs: true,
                            },
                        }
                        : undefined
                )
            ),

2、在public的html模版中添加变量

    <!-- 首屏加载的时的loading -->
    <%= htmlWebpackPlugin.options.loading.html %>