Webpack. Сборка отдельных css и скриптов в общие файлы

Как собрать разрозненные в проекте стили/скрипты в один файл (bundle.js/bundle.css)с помощью webpack?
Проект содержит стили и скрипты для каждого приложения, которые лежат в отдельном каталоге. Папка фронтенда:
├── frontend │   ├── common │   ├── node_modules │   ├── app1 │   ├── app2 │   ├── app3 │   ├── ... │   └── webpack.config.js
Папка каждого приложения имеет одинаковую структуру, но содержит разное количество скриптов, стилей, шаблонов, который располагаются на одном уровне:
├── app │   ├── static │   │   └── app │   │   ├── css │   │   │   └── app.css │   │   └── js │   │   ├── app-detail.js │   │   └── settings.js │   └── templates │   └── app │   ├── app__element-detail.html │   ├── app.html │   ├── app__periodic-table.html │   └── app__settings.html
Как собирать все эти файлы в один?
Применительно к стилям - видел способ с extract-text-webpack-plugin, но во всех примерах показыват один и тот же сценарий - одна точка входа, стили импортированы в скрипт и из них уже собирается.
Мне же нужно просто сделать бандл, его подключу в базовом шаблоне.
Аналогичный вопрос можно задать и по сборке всех скриптов, только кроме своих скриптов в сборку нужно включить скрипты нпм.
Дайте, пожалуйста, советы
Мой конфиг вебпака https://jsfiddle.net/9qkwuru1/
'use strict';
const NODE_ENV = process.env.NODE_ENV || 'development'; const webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = { context: __dirname, entry: "./table/static/table/js/settings.js", output: { path: __dirname + "/common", filename: "bundle.js" },
watch: NODE_ENV == 'development', watchOptions: { aggregateTimeout: 100 },
devtool: NODE_ENV == 'development' ? 'source-map' : null,
resolve: { moduleDirectories: ['node_modules'], extension: ['', '.js', '.styl'] },
resolveLoader: { moduleDirectories: ['node_modules'], moduleTemplates: ['*-loader'], extension: ['', '.js' ] },
module: { loaders: [{ test: /\.js$/, loader: 'babel', exclude: [ /(node_modules|bower_components)/ ], query: { presets: ['es2015'] } }, { test: /\.jade$/, loader: 'jade' }, { test: /\.css$/, loader: ExtractTextPlugin.extract({ fallbackLoader: "style-loader", loader: "css-loader" }) }, { test: /\.styl$/, loader: 'style!css!autoprefixer?browsers=last 2 version!stylus?resolve url' }, { test: /\.(png|jpg|svg)/, loader: 'file?name=[path][name].[ext]' }] },
plugins: [ new webpack.NoErrorsPlugin(), new webpack.DefinePlugin({ NODE_ENV: JSON.stringify(NODE_ENV) }), new webpack.ProvidePlugin({}), new ExtractTextPlugin({ filename: "bundle.css" }) ] };
if (NODE_ENV == 'production') { module.exports.plugins.push( new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false, drop_console: true, unsafe: true } }) ) }

Ответ

Мне приходилось решать такую задачу в одном из боевых проектов.
Для этого я использовал функцию glob, которая собирает все файлы по маске. https://www.npmjs.com/package/glob И обертку для нее, которая позволяет задавать несколько таких масок массивом: https://www.npmjs.com/package/glob-all Она довольно простая, не смотрите что звезд не очень много.
Ставим этот пакет (сам glob он вытянет зависимостью):
npm install glob-all --save-dev
В вебпак конфиге:
var glob = require("glob-all");
После этого выдаем точкам входа результат, например так:
entry: { yourAwesomeEntryPoint: glob.sync([ "./someFolder/*.js", "./anotherFolder/*.js" ]),
Соответственно маски могут задаваться довольно хитро, в том числе регуляркой, подробнее в документации к пакетам.
В моем случае этого хватило.