src="https://webpack.js.org/assets/icon-square-big.svg">

multiple-bundles-webpack-plugin

Create multiple bundles from independent js/scss components.

This plugin prevents Webpack 4 from creating an separate output file from multiple, unrelated components.
Inspired by Webpack-flat-bundle.

Usage

> :warning: To make independent css files, use Mini-Extract-Css-Plugin.

$3

``
npm install --save-dev multiple-bundles-webpack-plugin
`

Usage

##### Import plugin and helper method:

`
const { MultipleBundlesPlugin, globEntries } = require('multiple-bundles-webpack-plugin');
`

##### Add following to your webpack config:

`
const entries = {
...globEntries(['./src/js//.js']),
...globEntries(['./src/sass//.scss'], { sass: true }),
};
`

> sass key as a second argument is needed to replace bundles paths from sass/scss to css

It will create an object something like that:

`
{ 'js/components/helloWorld': './src/js/components/helloWorld.js',
'js/libs/picturefill': './src/js/libs/picturefill.js',
'css/core/_variables': './src/sass/core/_variables.scss',
'css/core/main': './src/sass/core/main.scss',
'css/utils/author': './src/sass/utils/author.scss' }
`

Then add entries object to entry property in webpack's object:

`
{
entry: entries
}
`

How it works?

- Helper method construct webpack entry object out of files that are matched by glob pattern.

By default this search tree and construct nested output tree, matching pattern provided.

`
{
plugins: [
new MultipleBundlesPlugin({
test: /\.js$/,
entries: globEntries(['./sass/*.scss']))
}
]
}
`

Feature Sets

| Property | Description |
| :-------- | :------------------------------------------------ |
| test | Match resources to being checked by plugin |
| entries | Pass globEntries object to match source of files. |

If you're using Mini-Extract-Css-Plugin it's important to set test property to /\.js$\ to matching only js files,
Otherwise plugin will prevent css files from emitting.

SourceMaps

This plugin supports CSS and JS SourceMaps.

Recommended devtool flags:
- cheap-module-source-map
- source-map
- inline-source-map
- inline-cheap-module-source-map

See reference to get more: https://webpack.js.org/configuration/devtool/

Eval sourcemaps e.g. eval-source-map` do not work properly with Mini-Extract-Css-Plugin.
This issue is not related with this plugin.

Feel free to make a pull request with new features or hotfixes.