如何使用Webpack 5将CSS与JS分离？

嗨，我来帮你搞定这个问题！要在Webpack 5里把CSS从JS打包文件中分离出来，核心是用mini-css-extract-plugin插件——它能把CSS代码提取成独立的文件，替代开发环境里把CSS注入JS的style-loader。下面一步步来修改你的配置：

1. 安装必要的插件 #

首先在项目里安装mini-css-extract-plugin，打开终端运行：

npm install mini-css-extract-plugin --save-dev
# 如果你用Yarn的话：
# yarn add mini-css-extract-plugin -D

2. 修改Webpack配置文件 #

接下来调整你的webpack.config.js，主要做这几个改动：

• 引入新安装的插件
• 根据环境切换CSS处理器（开发用style-loader，生产用插件的loader）
• 配置插件输出独立的CSS文件
• 调整输出路径结构（让JS和CSS分别放在dist/js和dist/css目录，更整洁）

修改后的完整配置如下：

const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin'); // 新增：引入插件
const path = require('path');

const isProduction = process.env.NODE_ENV === 'production';
// 新增：根据环境选择CSS处理器
const stylesHandler = isProduction ? MiniCssExtractPlugin.loader : 'style-loader';

const config = {
  entry: './src/js/index.js',
  // 修改：调整输出根目录为dist，JS放在js子目录
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: isProduction ? 'js/main.[contenthash].js' : 'js/main.js',
    clean: true,
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/i,
        loader: 'babel-loader',
      },
      {
        test: /\.css$/i,
        // 这里直接用上面定义的stylesHandler，自动适配环境
        use: [stylesHandler, 'css-loader', 'postcss-loader'],
      },
      {
        test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif|otf)$/i,
        type: 'asset',
      },
    ],
  },
  // 新增：添加插件配置
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html', // 记得指定你的HTML模板路径，不然生成的HTML不会自动引入资源
    }),
    new MiniCssExtractPlugin({
      // 生产环境用contenthash做缓存戳，开发环境用固定文件名
      filename: isProduction ? 'css/style.[contenthash].css' : 'css/style.css',
    }),
  ],
};

module.exports = () => {
  if (isProduction) {
    config.mode = 'production';
  } else {
    config.mode = 'development';
  }
  return config;
};

3. 不需要修改你的JS代码 #

你原来在index.js里的import 'style.css'完全不用改！Webpack会通过插件自动把CSS从JS中提取出来，不会再把CSS打包进main.js里。

4. 测试效果 #

运行你的打包命令试试：

npm run build
# 或者开发环境：
# npm run build:dev

打包完成后，你会在dist目录下看到：

• js/main.js（或带哈希的生产版本）
• css/style.css（或带哈希的生产版本）
• 自动生成的HTML文件，里面已经自动引入了这两个资源～

这样就完成了CSS和JS的分离，生产环境下浏览器可以分别缓存CSS和JS文件，提升页面加载性能！

备注：内容来源于stack exchange，提问作者Math