动态提取CSS利器：mini-css-extract-plugin

mini-css-extract-plugin 是一个插件，用于从 webpack 打包过程中的 CSS 文件中提取出 CSS 代码，并将其作为单独的文件进行输出。

以下是如何在 webpack 配置中使用 mini-css-extract-plugin 的示例代码：

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader'
        ]
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'styles.css'
    })
  ]
};

在这个配置中，当 webpack 处理到 CSS 文件时，它会使用 MiniCssExtractPlugin.loader 替换掉常规的 style-loader。这样，CSS 内容就不会内嵌在 JavaScript 文件中，而是会被提取出来，并在加载 CSS 文件的同时加载 styles.css 文件。这有助于优化页面加载性能，因为它减少了 JavaScript 的大小，并且避免了由于内联样式而导致的样式加载Flash问题。