我正在使用Mini CSS Extract插件将我的CSS分离到我的webpack
项目的dist
文件夹中。
我的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
命令时,会在我的dist
文件夹中生成与src
文件夹中的style.css
文件完全相同的style.css
文件。我需要将其包含进去。
<head>
...
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
为了使此功能正常工作,需要在 dist
文件夹中的 index.html
的头部进行设置。那么我的问题是 - 这样提取CSS的意义是什么? 如果 src
文件夹中的 style.css
文件与 dist
文件夹中的 style.css
文件完全相同,并且我必须包含它们,那么这样做有何意义?
<link rel="stylesheet" type="text/css" href="style.css" />
在我的HTML头部,我不理解这样做的优势是什么,即使Webpack文档指出:
请注意,在生产环境中,您可以(并且在大多数情况下应该)拆分CSS以获得更好的加载时间。
Mini CSS Extract Plugin: This plugin extract CSS into separate files. It creates a CSS file per JS file which contains CSS
- btzrindex.html
中引用它,那么您就不需要它。 - btzr