无法将所有css文件与bundle.css和具有bundle.js的webpack合并

Question

I am trying to combine my css files to bundle.css through webpack in reactjs , I am able to add all JS file in bundle.js but not able to combine all css file to bundle.css. 我试图通过reactjs中的webpack将我的css文件合并到bundle.css中，我能够在bundle.js中添加所有JS文件，但不能将所有css文件合并到bundle.css中。 There is src directory which contain all componet(js files) code. 有src目录，其中包含所有componet（js文件）代码。 and there is public directory which contain all css files. 并且有包含所有css文件的公共目录。 Can anybody help how to mange this 有人可以帮忙吗

My webpack.config.js is 我的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 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

Firstly Webpack does not support multiple output. 首先，Webpack不支持多个输出。 So in your webpack.config.js file include only js file paths. 因此，在webpack.config.js文件中仅包含js文件路径。

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

Now for your css files, do not include that in your html file instead include it in your entry file app.js 现在，对于您的css文件，不要在html文件中包含它，而应在输入文件app.js包含它

For example: 例如：

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;

Hope that helps you. 希望对您有帮助。

无法将所有css文件与bundle.css和具有bundle.js的webpack合并

问题描述

1 个解决方案

解决方案1
0 2018-01-10 06:01:17

无法将所有css文件与bundle.css和具有bundle.js的webpack合并

问题描述

1 个解决方案

解决方案1 0 2018-01-10 06:01:17

解决方案1
0 2018-01-10 06:01:17