title: import CSS and JS files using Webpack
body: <p>I have a directory structure like this:</p>
  
  <p><a href="https://i.stack.imgur.com/pQeEw.png" rel="noreferrer"><img src="https://i.stack.imgur.com/pQeEw.png" alt="enter image description here"></a></p>
  
  <p>and inside node_modules:</p>
  
  <pre><code> &gt;node_modules
    &gt;./bin
     &gt;webpack.config.js
    &gt;bootstrap
     &gt;bootstrap.css
     &gt;bootstrap.js
  </code></pre>
  
  <p>I need to generate separate CSS and JS bundles like this:</p>
  
  <p><strong>custom-styles.css, custom-js.js, style-libs.css, js-libs.js</strong></p>
  
  <p>where <code>style-libs</code> and <code>js-libs</code> should contain syles and js files of all libraries like bootstrap and jQuery. Here's what I have done so far:</p>
  
  <p><strong>webpack.config.js:</strong></p>
  
  <pre><code>const path = require('path');
  const basedir = path.join(__dirname, '../../client');
  const HtmlWebpackPlugin = require('html-webpack-plugin');
  const stylesPath = path.join(__dirname, '../bootstrap/dist/css');
  
  var ExtractTextPlugin = require("extract-text-webpack-plugin");
  
  module.exports = {
    watch: true,
  
    // Script to bundle using webpack
    entry: path.join(basedir, 'src', 'Client.js'),
    // Output directory and bundled file
    output: {
      path: path.join(basedir, 'dist'),
      filename: 'app.js'
    },
    // Configure module loaders (for JS ES6, JSX, etc.)
    module: {
      // Babel loader for JS(X) files, presets configured in .babelrc
      loaders: [
          {
              test: /\.jsx?$/,
              loader: 'babel',
              babelrc: false,
              query: {
                  presets: ["es2015", "stage-0", "react"],
                  cacheDirectory: true // TODO: only on development
              }
          },
          {
              test: /\.css$/,
              loader: ExtractTextPlugin.extract("style-loader", "css-loader")
          },
      ]
    },
    // Set plugins (for index.html, optimizations, etc.)
    plugins: [
       // Generate index.html
       new HtmlWebpackPlugin({
          template: path.join(basedir, 'src', 'index.html'),
          filename: 'index.html'
       }),
       new ExtractTextPlugin(stylesPath + "/bootstrap.css", {
          allChunks: true,
       })
    ]
  };
  </code></pre>
  
  <p><strong>Client.js</strong></p>
  
  <pre><code>import * as p from 'babel-polyfill';
  import React from 'react';
  import ReactDOM from 'react-dom';
  import App from './components/App.jsx';
  
  ReactDOM.render(&lt;App /&gt;, document.getElementById('app'));
  </code></pre>
  
  <p>I am able to run the app and render all of the components correctly except loading the external JS and CSS file using <code>webpack</code>.</p>
  
  <p>I'm not much experienced with webpack and find it really difficult it wrap my hear around it. There're are a few simple questions:</p>
  
  <p>1- <em>Is this configuration correct? If yes, then how can I include my CSS and JS files in components using ES6. Something like <code>import</code> keyword.</em></p>
  
  <p>2- <em>Should I even be using webpack for CSS files?</em></p>
  
  <p>3- <em>How to specify individual directories for input and their respective output files in webpack? Something like <code>all-custom.js</code> should be output for <code>custom1.js</code> and <code>custom2.js</code>?</em></p>
  
  <p>I know these are some very basic question and I tried Google but didn't find a single tutorial for Webpack that is simple and targets beginners.</p>