webpack加载css时如何停止FOUC
我得到FOUC时，加载css在我的入口点，当使用webpack。如果我删除了webpack加载的css，并将其作为普通链接包含在html文件中，那么FOUC的问题就消失了。
注意:这不仅仅是通过引导框架，我用Foundation进行了测试，结果也是一样的。
下面发布的代码只是使用Bootstrap测试我的问题的一个例子。
Html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1>Navbar example</h1>
</div>
</div> <!-- /container -->
<script src="build/bundle.js"></script>
</body>
</html>bootstrap.js主入口点
import "../node_modules/bootstrap/dist/css/bootstrap.css";
import bootstrap from 'bootstrap'
$(document).ready(function () {
console.log('bootstrap loaded')
});webpack.config.js
var path = require('path');
const ProvidePlugin = require('webpack/lib/ProvidePlugin');
const webpack = require("webpack");
module.exports = {
entry: './src/bootstrap.js',
output: {
path: path.join(__dirname, 'build'),
filename: 'bundle.js'
},
resolve: {
extensions: ['', '.js']
},
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
'window.jQuery': 'jquery'
})
],
devtool: 'inline-source-map',
module: {
resolve: {
modulesDirectories: ['node_modules']
},
loaders: [
{
test: path.join(__dirname, 'src'),
loader: 'babel-loader',
query: {
presets: ['es2015']
}
},
{ test: /\.css?$/, loader: 'style!css'},
{ test: /\.html$/, loader: 'html' },
{ test: /\.(png|gif|jpg)$/, loader: 'url', query: { limit: 8192 } },
{ test: /\.woff2(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'url', query: { limit: 10000, mimetype: 'application/font-woff2' } },
{ test: /\.woff(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'url', query: { limit: 10000, mimetype: 'application/font-woff' } },
{ test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'file' },
]
}
};回答 3
Stack Overflow用户
发布于 2016-04-06 15:40:28
ExtractTextWebpackPlugin将允许您将CSS输出为一个单独的文件，而不是将其嵌入到embedded中。然后，您可以将此文件包含在HTML中，正如您所说的那样，它可以防止非样式内容的闪存。
我建议只在生产环境中使用这种方法，因为它会阻止热加载的工作，并使编译花费更长的时间。我的webpack.config.js设置为只在process.env.NODE_ENV === "production"时应用插件；在进行开发构建/运行dev服务器时仍然可以使用process.env.NODE_ENV === "production"，但我觉得这是一种公平的权衡。
有关如何设置它的更多信息，请查看生存联合材料指南。
更新:正如注释中所指出的，ExtractTextWebpackPlugin现在已经被迷你-css-提取-插件取代了--您应该使用它。
Stack Overflow用户
发布于 2018-01-25 12:03:01
派对有点晚了，但我是这样做的。
虽然我认识到提取文本插件的优点，但它被一个重建错误所困扰，它扰乱了css的顺序，而且设置起来也很痛苦。设置超时在js不是任何人都应该做的事情(这是丑陋的，不能保证100%，以防止犯规)。
所以我的index.html是：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<style>
#app { display: none }
</style>
<title></title>
</head>
<body>
<div id="app"></div>
<script src="scripts/bundle.js"></script>
</body>
</html>然后，在client.js的末尾添加：
include "./unhide.css";...and unhide.css包含一行：
#app { display: block }看，在加载整个应用程序之前，你什么也看不见。
Stack Overflow用户
发布于 2017-05-10 21:04:59
它很简陋，但我将ReactDom.render()封装在根index.js文件中的setTimeout()中。
setTimeout(ReactDOM.render(...), 0)
https://stackoverflow.com/questions/36453826
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号