React项目中Webpack无法合并CSS为bundle.css问题求助

我来帮你搞定这个CSS打包的问题，看了你的配置和代码，有几个关键地方没设置对，咱们一步步修正：

核心问题分析 #

你的JS打包成功，但CSS无法合并，主要是因为Output配置冲突、ExtractTextPlugin未启用、CSS Loader重复定义这几个原因，另外你还没在HTML里切换到打包后的bundle.css。

修正步骤及代码 #

1. 修正webpack.config.js #

以下是调整后的完整配置，我会标注关键修改点：

require('es6-promise').polyfill();
require('babel-polyfill');
var webpack = require('webpack');
var path = require('path');
var combineLoaders = require('webpack-combine-loaders');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');

// 统一定义路径，避免重复写
const ROOT_DIR = __dirname;
const APP_DIR = path.resolve(ROOT_DIR, 'src');
const PUBLIC_DIR = path.resolve(ROOT_DIR, 'public');
const BUILD_DIR = path.resolve(PUBLIC_DIR, 'dist'); // 新建dist目录存放打包后的文件，结构更清晰

var config = {
  entry: {
    // 只保留JS入口，推荐通过JS引入CSS（后面会说）
    app: ['babel-polyfill', APP_DIR + '/app.js'],
    // 如果你不想在JS里引入CSS，可以保留这个CSS入口，但要确保loader正确处理
    // styles: [
    //   path.resolve(PUBLIC_DIR, 'css/bootstrap.min.css'),
    //   path.resolve(PUBLIC_DIR, 'css/appointment.css'),
    //   path.resolve(PUBLIC_DIR, 'css/menu.css'),
    //   path.resolve(PUBLIC_DIR, 'css/default.css'),
    //   path.resolve(PUBLIC_DIR, 'css/style.css'),
    //   path.resolve(PUBLIC_DIR, 'css/react-datepicker.css'),
    //   path.resolve(PUBLIC_DIR, 'css/react-day-picker.css'),
    //   path.resolve(PUBLIC_DIR, 'css/notifications.css'),
    //   path.resolve(PUBLIC_DIR, 'css/react-intl-tel-input.css'),
    //   path.resolve(PUBLIC_DIR, 'css/slicknav.min.css')
    // ]
  },
  output: {
    path: BUILD_DIR,
    filename: 'js/bundle.js', // JS输出到dist/js子目录
    publicPath: '/public/dist/' // 配置公共路径，方便HTML引用打包后的文件
  },
  plugins: [
    // 启用ExtractTextPlugin，指定输出的CSS文件名
    new ExtractTextPlugin('css/bundle.css'), // CSS输出到dist/css子目录
    new webpack.DefinePlugin({
      'process.env': {
        'NODE_ENV': JSON.stringify('local')
      }
    }),
    new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false } }),
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.optimize.DedupePlugin()
  ],
  module: {
    loaders: [{
      test: /\.js?$/,
      include: APP_DIR,
      exclude: /(node_modules)/,
      loader: 'babel-loader',
      options: { minimize: true },
      query: { plugins: ['transform-object-assign'] }
    }, {
      test: /.(png|jpg)$/,
      loader: 'url-loader?limit=8192'
    }, {
      // 合并CSS Loader配置，用ExtractTextPlugin提取
      test: /\.css$/,
      loader: ExtractTextPlugin.extract({
        fallback: 'style-loader',
        use: combineLoaders([{
          loader: 'css-loader',
          options: { minimize: true },
          // 如果你不需要CSS Modules，建议删掉下面这行，避免样式类名被修改导致失效
          // query: { modules: true, localIdentName: '[name]__[local]___[hash:base64:5]' }
        }])
      })
    }]
  },
  resolve: {
    extensions: ['.js', '.jsx', '.css'] // 移除空字符串，Webpack 2+不再需要
  }
};
module.exports = config;

关键修改说明：

• Output配置：移除了重复的path和filename，统一输出到public/dist目录，分js和css子目录，结构更清晰。
• ExtractTextPlugin启用：取消注释并配置输出的bundle.css路径，这是提取CSS的核心插件。
• CSS Loader合并：删除了重复的CSS loader规则，用ExtractTextPlugin的extract方法统一处理，避免规则冲突。
• Entry优化：推荐在JS文件里引入CSS（下面会讲），这样Webpack会自动追踪依赖，不需要单独写CSS入口。

2. 修正index.html #

把原来的多个CSS引用替换成打包后的bundle.css，同时调整JS的引用路径：

<html>
<head>
<title>My APP</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
<!--Stylesheet-->
<link rel="shortcut icon" href="images/favicon.ico" />
<!-- 替换成打包后的bundle.css -->
<link rel="stylesheet" href="dist/css/bundle.css"/>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDxf2BKbwAcqylDnCKWFuV8q3qlS5tNtcI&libraries=placeses,visualization,drawing,geometry,places"></script>
</head>
<body class="home">
<div id="root"></div>
<!--Bundled file-->
<!-- 替换成打包后的bundle.js路径 -->
<script src="dist/js/bundle.js"></script>
</body>
</html>

3. 推荐：在JS中引入CSS（更符合Webpack理念） #

打开你的src/app.js，在顶部添加所有CSS的import语句：

// 引入所有CSS文件
import '../public/css/bootstrap.min.css';
import '../public/css/appointment.css';
import '../public/css/menu.css';
import '../public/css/default.css';
import '../public/css/style.css';
import '../public/css/react-datepicker.css';
import '../public/css/react-day-picker.css';
import '../public/css/notifications.css';
import '../public/css/react-intl-tel-input.css';
import '../public/css/slicknav.min.css';

// 你的其他JS代码...

这样Webpack会自动追踪这些CSS依赖，不需要在entry里单独配置CSS入口，更符合模块化打包的思路。

最后验证 #

运行Webpack打包命令后，检查public/dist/css/bundle.css是否生成，然后打开index.html确认样式正常加载即可。

内容的提问来源于stack exchange，提问作者BHUVNESH KUMAR