我正在使用 Mini CSS Extract Plugin在我的 dist 中将我的 CSS 拆分成它自己的文件我的 webpack 项目的文件夹。
我的 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.css在我的 dist文件夹，与我的 style.css 相同文件在我的 src文件夹。我必须包括<head>
...
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
在
index.html的头部在 dist文件夹以使其工作。所以我的问题是 - 像这样提取 CSS 有什么意义？ 如果style.css src 中的文件文件夹与 style.css 相同dist 中的文件文件夹，我必须包括<link rel="stylesheet" type="text/css" href="style.css" />
在我的 HTML 的头部，我不明白这样做的好处是什么，即使 Webpack Documentation状态
Note that you can, and in most cases should, split your CSS for better load times in production.
最佳答案
这允许缓存 CSS。
您还可以获得无样式内容 (FOUC) 的 Flash。 FOUC 的发生是因为浏览器需要一段时间来加载 JavaScript，并且样式才会在那时被应用。
通过让浏览器单独管理它，将 CSS 分离到它自己的文件可以避免这个问题。
关于Webpack Mini CSS Extract Plugin - 提取 CSS 有什么意义？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49330009/