怎么使用 webpack，将 JS 文件中的 css 提取到单独的样式文件中？

在前端项目中使用 Webpack 提取 JS 文件中的 CSS，可以通过以下步骤实现：

1. 安装必要的依赖

首先，需要安装以下依赖：

npm install --save-dev webpack webpack-cli style-loader css-loader mini-css-extract-plugin

2. 配置 Webpack

在 Webpack 配置文件 webpack.config.js 中，配置 MiniCssExtractPlugin 来提取 CSS。

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"),
  },
  module: {
    rules: [
      {
        test: /\.css$/, // 匹配 CSS 文件
        use: [
          MiniCssExtractPlugin.loader, // 提取 CSS
          "css-loader", // 处理 CSS
        ],
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "styles.css", // 输出的 CSS 文件名
    }),
  ],
};

3. 在 JavaScript 中引入 CSS

在你的 JS 文件中，引入 CSS 文件：

import "./styles.css"; // 引入 CSS 文件

console.log("Hello, World!");

4. 运行 Webpack

使用以下命令构建项目：

npx webpack --config webpack.config.js

5. 输出结果

构建完成后，生成的 dist 文件夹中会包含 bundle.js 和 styles.css，CSS 被成功提取到单独的文件中。