У меня есть структура каталогов, как это:

и внутри node_modules:

 >node_modules
  >./bin
   >webpack.config.js
  >bootstrap
   >bootstrap.css
   >bootstrap.js

Мне нужно создать отдельные пакеты CSS и JS, как это:

custom-styles.css, custom-js.js, style-libs.css, js-libs.js

гдеstyle-libs а такжеjs-libs должен содержать файлы syles и js всех библиотек, таких как bootstrap и jQuery. Вот что я сделал до сих пор:

webpack.config.js:

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,
     })
  ]
};

Client.js

import * as p from 'babel-polyfill';
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App.jsx';

ReactDOM.render(<App />, document.getElementById('app'));

Я могу запустить приложение и правильно отобразить все компоненты, кроме загрузки внешнего файла JS и CSS с помощьюwebpack.

Я не очень разбираюсь в вебпаке, и мне действительно трудно это обернуть вокруг. Есть несколько простых вопросов:

1-Это правильная конфигурация? Если да, то как я могу включить мои файлы CSS и JS в компоненты, используя ES6. Что-то вродеimport ключевое слово.

2-Должен ли я даже использовать веб-пакет для CSS-файлов?

3-Как указать отдельные каталоги для ввода и соответствующие им выходные файлы в веб-пакете? Что-то вродеall-custom.js должен быть выведен дляcustom1.js а такжеcustom2.js?

Я знаю, что это очень простой вопрос, и я попробовал Google, но не нашел ни одного простого учебника для Webpack, ориентированного на начинающих.