如何在Webpack配置中调整CSS提取插件的顺序？

要在Webpack配置中调整CSS提取插件（如`mini-css-extract-plugin`或`extract-text-webpack-plugin`）的顺序，你需要关注以下几个关键配置点：

1. **loader顺序**:
确保所有处理CSS的loader，如`css-loader`, `postcss-loader`, 和 `less-loader`等，都在`mini-css-extract-plugin`之前。例如，在`module.rules`或`.vue`组件的`rules`部分，它们应该看起来像这样：

   {
     test: /\.less$/,
     use: [
       { loader: 'style-loader' }, // 这会先加载，确保不会被提取
       { loader: 'css-loader' },
       { loader: 'postcss-loader' },
       { loader: 'less-loader', options: {} } // 提取插件放在最后
     ]
   }

如果你在使用Vue CLI，可能会在`vue.config.js`的`configureWebpack`里做类似操作。

2. **ExtractPlugin配置**:
对于`mini-css-extract-plugin`，你需要指定它提取CSS的方式以及在哪一步执行。确保它的位置在所有CSS loader之后：

   const MiniCssExtractPlugin = require('mini-css-extract-plugin');
   module.exports = {
     plugins: [
       new MiniCssExtractPlugin({
         filename: '[name].css', // 输出CSS文件名
         chunkFilename: '[id].css' // 分割出的chunk文件名
       })
     ],
     module: {
       rules: [...]
     }
   };

3. **分块（splitChunks）**:
如果你在使用`optimization.splitChunks`，可能会影响CSS提取的时机。确保对`runtimeChunk`和`allChunks`的配置不会无意中改变CSS的加载顺序。

记得在调整配置后重启Webpack服务，并查看构建日志以确认更改是否有效。