Webpack: bundle multiple vendor css in one separate file?

Question

I want to bundle several standard libraries into two files bundle.js and bundle.css with webpack 3.8

This is my webpack.config.js:

const webpack = require('webpack');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const path = require("path");

module.exports = {
  entry: {
    'vendor': [
      'jquery',
      'popper.js',
      'bootstrap',
    ],

  },

    output: {
    path: path.resolve(__dirname, 'public/js'),
    filename: 'bundle.js'
  },

  module: {
              rules:[
                    {
                    test: /\.css$/,
                    use: ExtractTextPlugin.extract({
                      fallback: "style-loader",
                      use: "css-loader"
                    })
                  }
                ],


  },

  plugins: [

    new webpack.optimize.UglifyJsPlugin({
      uglifyOptions: {
        compress: true 
      }
    }),

    new ExtractTextPlugin("styles.css"),

  ]
};

After running webpack, I get only bundle.js file:

    Asset    Size  Chunks                    Chunk Names
bundle.js  264 kB       0  [emitted]  [big]  vendor

How should I config webpack to produce bundle.css ?

Answer 1

There are two ways to do it.

First

You can import your .css files in the files provided at entry point.

for eg.

if entry: index.js

in index.js you have to import your css files

import './*.css'      // all css files in root

Second

you can provide it in your entry point.

entry: {
   {
    'vendor': [
      'jquery',
      'popper.js',
      'bootstrap',
    ],
    'styles': '/*.css'    
  }
}