使用Webpack加载的CSS时如何停止FOUC [英] How to stop FOUC when using css loaded by webpack
问题描述
使用webpack时，在入口点内部加载CSS时出现FOUC。如果我从webpack加载中删除css并将其作为常规链接包含在html文件中，则FOUC的问题就消失了。
I am getting FOUC when loading css inside of my entry point when using webpack. If I remove my css from being loaded by webpack and just include it in my html file as a normal link then the problem with FOUC goes away.
注意：这不仅是自举框架，我还用
Foundation和Materialize测试了相同的结果
Note: This not just with bootstrap framework, I have tested with Foundation and Materialize with the same results
下面发布的代码只是使用Bootstrap解决我的问题的一个测试示例。
The code posted below is just a test example of my problem using 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主要入口点
bootstrap.js main entry point
import "../node_modules/bootstrap/dist/css/bootstrap.css";
import bootstrap from 'bootstrap'
$(document).ready(function () {
console.log('bootstrap loaded')
});
webpack.config.js
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' },
]
}
};
推荐答案
ExtractTextWebpackPlugin 允许您将CSS输出为单独的文件，而不是将其嵌入JS包中。然后，您可以将该文件包含在HTML中，就像您所说的那样，可以防止闪烁未样式化的内容。
ExtractTextWebpackPlugin will allow you to output your CSS as a separate file rather than having it embedded in your JS bundle. You can then include this file in your HTML, which as you said, prevents the flash of unstyled content.
我建议仅在生产环境中使用此文件，因为它停止热加载工作，并使编译时间更长。我将 webpack.config.js 设置为仅在 process.env.NODE_ENV === production ;在进行开发构建/运行开发服务器时，仍然可以得到FOUC，但是我觉得这是一个公平的权衡。
I'd recommend only using this in production environments, as it stops hot-loading from working and makes your compile take longer. I have my webpack.config.js set up to only apply the plugin when process.env.NODE_ENV === "production"; you still get the FOUC when you're doing a development build/running the dev server, but I feel like this is a fair trade off.
有关如何操作的更多信息要进行设置，请查看 SurviveJS的指南。
For more information on how to set this up, take a look at SurviveJS's guide.
更新：如评论中所述，ExtractTextWebpackPlugin现在已由 mini-css-extract-plugin -您应该改用它。
Update: As noted in the comments, ExtractTextWebpackPlugin has now been superceded by mini-css-extract-plugin - you should use that instead.
这篇关于使用Webpack加载的CSS时如何停止FOUC的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
