Ability to use different levels for different entry points

[nikita-ezhkov]

We have a few entry points in some projects with own levels of overrides. It looks crappy to execute a several builds with parameter for build all of project assets (one for every entry point).

[nikita-ezhkov]

@Yeti-or @awinogradov ping

[nikita-ezhkov]

@veged @Yeti-or Guys, i have one more PR. Could you consider this?

[veged]

@nikita-ezhkov sorry, this one a little bit more complex and may take a time :-(

[veged]

@nikita-ezhkov @awinogradov @Yeti-or

What if we gonna make levelsByEntries object with globs for entry points as a keys and arrays of levels as a value?

The entry points

entry: {
    entry0: 'entry-point0.js',
    entry1: 'other-entry-points/entry-point1.js'
    entry2: 'other-entry-points/entry-point2.js'
}

The loader config

loader: 'webpack-bem-loader',
options: {
    ...
    levelsByEntries: {
        'entry-point0.js' : [
            'blocks1',
            'overrides/overrides-blocks1'
        ],
        'other-entry-points/*' : [
            'blocks2',
            'overrides/overrides-blocks2'
        ]
    },
    ...
}

For simplicity let's assume that levelsByEntries completely override levels if matched.

There is a formal problem with order of globs in keys in case of simultaneously matched globs, but again for simplicity we can assume that all entry point globs should be different enough. We can also throw an error in such cases.

[nikita-ezhkov]

It was a question for me how to figure out entry point of given file. If it is possible i like this format.

[nikita-ezhkov]

@Yeti-or @awinogradov ⬆️

[veged]

@awinogradov is on vacation till 22 Feb

[veged]

@awinogradov up ;-)

[awinogradov]

So, if you want to build many entries in parallel mode, you can use default webpack API for that. Also, you can run devServer for this process as well.

const webpack = require('webpack');
const WebpackDevServer = require('webpack-dev-server');

function getWebpackConfig(levels) {
// ...
}

const entries = {
  entry1: ['lvl1', 'lvl2'],
  // ...
}

const compiler = webpack(Object.keys(entires).map(entry => getWebpackConfig(entries[entry])), err => {
  console.log('async builded entires');
})

new WebpackDevServer(compiler, devServerConfig).listen(port, err => {
    if (err) {
       return console.log(err);
    }
});