Multiple configurations for webpack

Hi,

I have seen that it is possible to have multiple configurations in the webpack.config.js, just like magic :

Encore
    .setOutputPath('web/build/')
    .setPublicPath('/build')
    .addEntry('app', './assets/js/main.js')
    .addStyleEntry('global', './assets/css/global.scss')
    .enableSassLoader()
    .autoProvidejQuery()
    .enableSourceMaps(!Encore.isProduction())
;

// build the first configuration
const firstConfig = Encore.getWebpackConfig();

// Reset Encore to build the second config
Encore.reset();

Encore
    .setOutputPath('web/build/')
    .setPublicPath('/build')
    .addEntry('mobile', './assets/js/mobile.js')
    .addStyleEntry('mobile', './assets/css/mobile.less')
    .enableLessLoader()
    .enableSourceMaps(!Encore.isProduction())
;

// build the second configuration
const secondConfig = Encore.getWebpackConfig();

// export the final configuration
module.exports = [firstConfig, secondConfig];

But I want to know if it is possible to run one config with a specific option, like
yarn run encore dev --firstConfig

Thank you for your answer

[stof]

AFAIK, webpack's multi-compiler mode does not have an option to run only one of the configured ones.

And I'm sure Encore does not add such an option.

[Lyrkan]

@stof It looks like Webpack allows it since v3.4.0: webpack/webpack#5331

@zek0faws I didn't test it but maybe the following config would work:

Encore
    .setOutputPath('web/build/')
    .setPublicPath('/build')
    .addEntry('app', './assets/js/main.js')
    .addStyleEntry('global', './assets/css/global.scss')
    .enableSassLoader()
    .autoProvidejQuery()
    .enableSourceMaps(!Encore.isProduction())
;

// build the first configuration
const firstConfig = Encore.getWebpackConfig();

// Set a name for the config (don't forget that line!)
firstConfig.name = 'firstConfig';

// Reset Encore to build the second config
Encore.reset();

Encore
    .setOutputPath('web/build/')
    .setPublicPath('/build')
    .addEntry('mobile', './assets/js/mobile.js')
    .addStyleEntry('mobile', './assets/css/mobile.less')
    .enableLessLoader()
    .enableSourceMaps(!Encore.isProduction())
;

// build the second configuration
const secondConfig = Encore.getWebpackConfig();

// Set a name for the config (don't forget that line!)
secondConfig.name = 'secondConfig';

// export the final configuration
module.exports = [firstConfig, secondConfig];

$ yarn run encore dev --config-name firstConfig

Hi Lykran,

I just tried out my config file using the multiple config and used your command.

It works like a charm.

Also, for those who don't read carefully the config file like I did, do not forget to change the name of the entry I case of global compilation with webpack.

Thank you for your answer !

[Lyrkan]

Great :)

I edited my previous comment to make it more clear that a name must be set manually for each config.

Unfortunatelly, it seems it's not really working for the second config.

My test was the command line you give me :
yarn run encore dev --config-name firstConfig

And in my second config I added an error to see if only the first config was load .
It was good.
But now, when I tried to run only the second config, it loads the first one.

[Lyrkan]

That's odd, it works for me:

// webpack.config.js
const Encore = require('@symfony/webpack-encore');

// Build first config
Encore
  .setOutputPath('build-1/')
  .setPublicPath('/')
  .cleanupOutputBeforeBuild()
  .addEntry('main', './src/index.js')
;

const firstConfig = Encore.getWebpackConfig();
firstConfig.name = 'firstConfig';

// Reset Encore state
Encore.reset();

// Build second config
Encore
  .setOutputPath('build-2/')
  .setPublicPath('/')
  .cleanupOutputBeforeBuild()
  .addEntry('main', './src/index.js')
;

const secondConfig = Encore.getWebpackConfig();
secondConfig.name = 'secondConfig';

// Export both configs
module.exports = [firstConfig, secondConfig];

That one's for me.

When I use the first config it works, but when i use the second config it loads the first one because ... I forgot to add
Encore.reset();

Now everything is fine. :)

[stof]

@zek0faws if you forget to reset, it still loads the second one properly, except that the second one is actually a merge of your 2 expected configs