使用 webpack，将 JS 文件中的 css 提取到单独的样式文件中
1. 安装必要的依赖
首先，你需要安装 mini-css-extract-plugin 和相关的加载器。mini-css-extract-plugin 是一个用于将 CSS 提取到单独文件的 Webpack 插件。
npm install --save-dev mini-css-extract-plugin css-loader style-loader
2. 配置 Webpack
接下来，你需要在 Webpack 配置文件中（通常是 webpack.config.js）添加相应的加载器和插件。
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$/,use: [MiniCssExtractPlugin.loader, // 替换 style-loader，将 CSS 提取到单独文件'css-loader']},{test: /\.js$/,exclude: /node_modules/,use: {loader: 'babel-loader'}}]},plugins: [new MiniCssExtractPlugin({filename: '[name].css', // 输出的 CSS 文件名chunkFilename: '[id].css' // 分割出的 CSS 文件名})]
};
3. 使用 CSS
在你的 JavaScript 文件中，你可以像往常一样导入 CSS 文件：
// src/index.js
import './styles.css';console.log('Hello, Webpack!');
4. 创建 CSS 文件
在 src 目录下创建一个 styles.css 文件：
/* src/styles.css */
body {background-color: #f0f0f0;font-family: Arial, sans-serif;
}
5. 运行 Webpack
最后，运行 Webpack 构建命令：
npx webpack
6. 查看输出
构建完成后，你可以在 dist 目录下看到生成的 bundle.js 和 main.css 文件。main.css 文件包含了从 JavaScript 文件中提取的 CSS 代码。