在webpack中設(shè)置初始化loading
項(xiàng)目基于create-react-app腳手架，所以先創(chuàng)建項(xiàng)目件蚕，然后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模版中添加變量
<!-- 首屏加載的時(shí)的loading -->
<%= htmlWebpackPlugin.options.loading.html %>
