我把webpack配置分成了普通、开发和生产配置。我也通过webpack加载jQuery。问题是,当页面刷新时,在加载css之前会有200-300ms的短暂延迟,所以我的页面先是没有显示css,然后再重新加载css。可能是什么问题?
在普通插件下,我有。
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery'
}),
在开发模式下,我有:
{
test: /\.scss$|\.css$/,
use: [
{
loader: "style-loader",
options: {sourceMap: true}
},
{
loader: "css-loader",
options: {sourceMap: true}
},
{
loader: "sass-loader",
options: {sourceMap: true}
}
]
},
而在生产模式下,我的配置是:
optimization: {
minimizer: [
new UglifyJSPlugin({
sourceMap: true,
uglifyOptions: {
mangle: false,
compress: {
inline: false
}
}
}),
new OptimizeCssAssetsPlugin({
cssProcessor: require('cssnano'),
cssProcessorOptions: {parser: _safe, discardComments: {removeAll: true}},
canPrint: true
})
]
},
module: {
rules: [
{
test: /\.(sa|sc|c)ss$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'sass-loader'
]
}
]
}
EDIT 这是编译后的html文件。
<!DOCTYPE html>
<html lang=en>
<head>
<meta charset=UTF-8>
<meta name=viewport content="width=device-width">
<meta http-equiv=X-UA-Compatible content="ie=edge">
<link rel="shortcut icon" href="favicon.png">
</head>
<body>
<div id=app></div>
<script type="text/javascript" src="main.bundle.js?32313079e3d03749d814"></script>
</body>
</html>
也许现在回答这个问题已经太晚了,但是,这和Webpack无关。你在页面的最后附加了你的 bundle。因此,在加载bundle之前,页面内容会出现,之后bundle会加载样式。因此,在完全加载之前,浏览器需要一点时间来运行bundle和附加样式。这可以通过将bundle放在以下位置来解决 <head>
标签。你可能需要在你的jquery代码中运行 $(document).ready()
函数,通过传递一个回调作为参数。请注意,这也会影响你的页面的加载时间。
另一种解决方案是配置Webpack先加载样式,然后再加载js代码。