How to bundle and copy CSS files from source folder to dist folder?

Question

Here is my folder structure:

I want to minify and bundle the CSS files inside my src/css folder and output it as a single CSS file inside dist. All the examples I've seen so far recommend require-ing the CSS file inside a JS file. I do not want that. Is there a way to configure in webpack.config.js to just minify and copy these files?

Answer 1

Got it working.

Install dev-dependecies

npm i extract-text-webpack-plugin --save-dev
npm i css-loader --save-dev

webpack.config.js

const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const extractCSS = new ExtractTextPlugin('bundle.min.css')

module.exports = {
  entry: {
    'bundle.min.css': [
      __dirname + '/src/styles/abc.css',
      __dirname + '/src/styles/xyz.css',
      __dirname + '/src/styles/mno.css'
    ]
  },
  devtool: '',
  output: {
    path: __dirname + '/dist/styles/',
    filename: '[name]'

  },
  module: {
    rules: [{
        test: /\.css$/i,
        use: extractCSS.extract({
          use: {
            loader: 'css-loader',
            options: {
              minimize: true
            }
          }
        })
    }]
  },
  resolve: {
    alias: {},
    modules: [],
    extensions: ['.css']
  },
  plugins: [
    extractCSS
  ]
};

bundle.min.css will get generated. Based on minimize: true/false, minification will be decided. Enjoy!