使用mini-css-extract-plugin插件让webpack将css打包到css目录中 路径发生错误

如果使用 `mini-css-extract-plugin` 插件让 webpack 将 CSS 打包到一个单独的 CSS 文件中，而 CSS 文件中的 URL 路径发生了错误，一般有两种情况：

1. CSS 中的相对路径错误：在 CSS 文件中使用的相对路径应该相对于 CSS 文件的位置来解析，而不是相对于 HTML 文件或 JS 文件的位置。如果你使用 `MiniCssExtractPlugin.loader` 作为 CSS loader，那么 CSS 文件会被提取到 `output.path` 目录下的某个位置，而不是和 JS 文件同级的位置。因此，你需要在配置中指定 `publicPath` 参数来指定 CSS 文件在服务器上的 URL 路径。例如：

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

module.exports = {
  // ...
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
    publicPath: "/",
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader",
        ],
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "css/[name].css",
    }),
  ],
};

上面的配置中，我们将 CSS 文件提取到 `dist/css` 目录下，并指定了 `publicPath` 参数为 `/`，表示所有静态资源都在根目录下。这样，在 CSS 文件中使用相对路径时，就会相对于 `dist/css` 目录来解析。

2. 图片等资源文件路径错误：如果 CSS 中包含了图片等资源文件，那么这些文件的路径也需要正确解析。一般来说，可以使用 `file-loader` 或 `url-loader` 来处理这些文件，并在 CSS 中使用相对路径来引用它们。例如：

/* style.css */
body {
  background-image: url(../images/bg.jpg);
}

// webpack.config.js
module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader",
        ],
      },
      {
        test: /\.(png|jpe?g|gif|svg)$/i,
        use: [
          {
            loader: "url-loader",
            options: {
              limit: 8192,
              name: "images/[name].[hash:8].[ext]",
            },
          },
        ],
      },
    ],
  },
};

上面的配置中，`url-loader` 会将小于 8KB 的图片文件转换为 base64 编码的 Data URL，而大于 8KB 的文件会被转换为单独的文件，并存放到 `dist/images` 目录下。在 CSS 文件中使用相对路径 `../images/bg.jpg` 就可以正确引用这个图片文件了。