webpack将css文件打包到css目录下

要将CSS文件打包到css目录下，可以在webpack配置文件中进行如下配置：

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  // ...其他配置
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              publicPath: '../' // 解决css中引入的图片路径不正确的问题
            }
          },
          'css-loader'
        ]
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'css/[name].[chunkhash].css'
    })
  ]
}

其中，module.rules配置用于指定如何处理各种类型的文件，plugins配置用于指定插件。这里使用了MiniCssExtractPlugin（需要先安装），它的作用是将CSS文件单独打包到指定的目录下，而不是将CSS代码打包到JS文件中。

在module.rules中配置了针对CSS文件的处理规则，其中使用了css-loader和MiniCssExtractPlugin.loader。css-loader用于解析CSS文件中的@import和url()等语法，并将其转换为Webpack可以理解的语法。MiniCssExtractPlugin.loader用于将CSS代码从JS文件中提取出来并打包到指定目录下，同时也可以处理CSS中引入的图片路径不正确的问题。

在plugins中配置了MiniCssExtractPlugin插件，用于指定打包生成的CSS文件输出目录和文件名。这里将打包生成的所有CSS文件都放在了css目录下，文件名格式为css/[name].[chunkhash].css，其中name表示文件名，chunkhash表示文件的hash值。这样每次打包生成的文件名都不同，有助于缓存更新。