logo标签列表

Webpack Mini CSS Extract插件 - 提取CSS的意义是什么？

webpackwebpack-style-loader
7

我正在使用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 - btzr
2
有时候你需要在js文件中导入css，参见：https://dev59.com/U1cP5IYBdhLWcg3wY5GJ#44474869 - btzr
1
css-modules: https://github.com/css-modules/css-modules - btzr
1
如果您将所有的 CSS 放在一个文件中并在 index.html 中引用它，那么您就不需要它。 - btzr
1
感谢您的帮助和资源，@btzr。 - rpivovar
1个回答
8

这允许缓存CSS。
您还可以获得未经样式化的Flash内容（FOUC）。
FOUC发生是因为浏览器需要一段时间来加载JavaScript，然后才会应用样式。
将CSS分离为自己的文件可以通过让浏览器单独管理它来避免这个问题。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接