Question

我正在尝试通过reactjs中的webpack将我的css文件合并到bundle.css，我能够在bundle.js中添加所有JS文件，但无法将所有css文件合并到bundle.css中。有src目录，其中包含所有componet（js文件）代码。并且有包含所有css文件的公共目录。任何人都可以帮忙解决这个问题吗

我的webpack.config.js是

require('es6-promise').polyfill();
require('babel-polyfill');
var webpack = require('webpack');
var path = require('path');
// for js
var BUILD_DIR = path.resolve(__dirname, 'public/js'); 
var APP_DIR = path.resolve(__dirname, 'src');
// for html 
var PUBLIC_DIR = path.resolve(__dirname, 'public');  
// for css
var CSS_DIR = path.resolve(__dirname, 'public/css');
var CSS_BUILD_DIR = path.resolve(__dirname, 'public/css'); 

var combineLoaders = require('webpack-combine-loaders');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');

var config = {
  entry: {
   'js':['babel-polyfill',APP_DIR + '/app.js'],
   //'html': PUBLIC_DIR+'/index.html',
   'css' : [
      CSS_DIR +'/bootstrap.min.css',
      CSS_DIR +'/appointment.css',
      CSS_DIR +'/menu.css',
      CSS_DIR +'/default.css',
      CSS_DIR +'/style.css',
      CSS_DIR +'/react-datepicker.css',
      CSS_DIR +'/react-day-picker.css',
      CSS_DIR +'/notifications.css',
      CSS_DIR +'/react-intl-tel-input.css',
      CSS_DIR +'/slicknav.min.css'
   ]
  },
  output: {
    path: BUILD_DIR,
    filename: 'bundle.js',
    path: CSS_BUILD_DIR,
    filename: 'bundle.css',
  },
  plugins: [
    //new ExtractTextPlugin('styles-[hash].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' 
      },
      {
          test: /\.css?$/,
          loader: 'style!css' // This are the loaders
      }, 
      {
        test: /\.css$/,
        loaders: ExtractTextPlugin.extract(
          combineLoaders([{
            loader: 'css-loader',
            options: {
              minimize: true
            },
            query: {
              modules: true,
              localIdentName: '[name]__[local]___[hash:base64:5]'
            }
          }])
        )
      }]
    },
    resolve: {
      extensions: ['', '.js', '.jsx', '.css']
    }
};
module.exports = config;

的index.html

    <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" />
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <link rel="stylesheet" href="css/appointment.css">
        <link rel="stylesheet" href="css/menu.css">
        <link rel="stylesheet" href="css/default.css">
        <link rel="stylesheet" href="css/style.css">
        <link rel="stylesheet" href="css/react-datepicker.css">
        <link rel="stylesheet" href="css/react-day-picker.css">
        <link rel="stylesheet" href="css/notifications.css">
        <link rel="stylesheet" href="css/react-intl-tel-input.css">
        <link rel="stylesheet" href="css/slicknav.min.css"/>
        //<link rel="stylesheet" href="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-->
            <script src="js/bundle.js"></script>
        </body>
    </html>

Answer 1

首先，Webpack不支持多输出。因此，在webpack.config.js文件中仅包含js个文件路径。

output: {
    path: BUILD_DIR,
    filename: 'bundle.js'
}

现在，对于您的css文件，请不要在html文件中包含该文件，而是将其包含在您的条目文件中app.js

例如：

import React, {Component} from 'react';

import RoutesComponent from './routes';
import {BrowserRouter} from 'react-router-dom'

//import all your css files here only
import 'bootstrap/dist/css/bootstrap.css';
import './public/css/menu.css';

class App extends Component {
    render() {
        return (

                    <BrowserRouter>
                        <RoutesComponent/>
                    </BrowserRouter>

        )
    }
}

export default App;

希望对你有所帮助。

无法将所有带有bundle.css的css文件与像bundle.js这样的webpack组合在一起

1 个答案: