rpi*_*var 7 webpack webpack-style-loader
我正在使用Mini CSS Extract Plugin将 CSS 拆分为distwebpack 项目文件夹中自己的文件。
我的webpack.config.js文件如下所示：
const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
plugins: [
new MiniCssExtractPlugin({
filename: "style.css"
})
],
module: {
rules: [
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
"css-loader"
]
}
]
}
};
当我 时，这会在我的文件夹中npm run build构建文件，该文件与我的文件夹中的文件相同。我必须包括style.cssdiststyle.csssrc
<head>
...
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
index.html在文件夹的头部，dist以使其起作用。所以我的问题是 -像这样提取 CSS 有什么意义？如果文件夹style.css中的文件与文件夹中的文件src相同，并且我必须包括style.cssdist
<link rel="stylesheet" type="text/css" href="style.css" />
在我的 HTML 头部，我不明白这样做的好处是什么，尽管Webpack 文档指出
请注意，您可以而且在大多数情况下应该拆分 CSS，以便在生产中缩短加载时间。
小智 8
这允许缓存 CSS。
您还可以获得无样式内容 Flash (FOUC)。
发生 FOUC 是因为浏览器需要一段时间来加载 JavaScript，并且只有在那时才会应用样式。
将 CSS 分离到一个单独的文件中可以让浏览器单独管理它，从而避免了这个问题。
| 归档时间： |
|
| 查看次数： |
5891 次 |
| 最近记录： |