Webpack-encore: problem with Multiple Webpack Configurations

[Alymbek]

Hi, comrades.

I'm trying to make multiple webpack configurations as described here -https://symfony.com/doc/current/frontend/encore/advanced-config.html#defining-multiple-webpack-configurations.

But, after compiling I get incorrect manifest and entrypoints files only with first entry and get error "An exception has been thrown during the rendering of a template ("Could not find the entry "mobile" in "/var/www/tst.loc/public/build/entrypoints.json". Found: entrypoints.")."

How to fix it?

webpack.config.js:

var Encore = require('@symfony/webpack-encore');

////////////////////////////////////////////////////////////////////////////////
Encore
  .setOutputPath('public/build/')
  .setPublicPath('/build')

  .addEntry('full', './assets/js/full.js')
  .enableLessLoader()
  .enableSingleRuntimeChunk()
  .cleanupOutputBeforeBuild()
  .enableBuildNotifications()
  .enableSourceMaps(!Encore.isProduction())
  .enableVersioning(Encore.isProduction())

  .configureFilenames({
    css: 'full/css/[name]-[hash:6].css',
    js: 'full/js/[name]-[hash:6].js'
  })

const fullConfig = Encore.getWebpackConfig();
fullConfig.name = 'full';
fullConfig.watchOptions = {
  poll: true,
  ignored: /node_modules/
};

Encore.reset();

////////////////////////////////////////////////////////////////////////////////
Encore
  .setOutputPath('public/build/')
  .setPublicPath('/build')

  .addEntry('mobile', './assets/js/mobile.js')
  .enableLessLoader()
  .enableSingleRuntimeChunk()
  .cleanupOutputBeforeBuild()
  .enableBuildNotifications()
  .enableSourceMaps(!Encore.isProduction())
  .enableVersioning(Encore.isProduction())

  .configureFilenames({
    css: 'mobile/css/[name]-[hash:6].css',
    js: 'mobile/js/[name]-[hash:6].js'
  })

const mobileConfig = Encore.getWebpackConfig();
mobileConfig.name = 'mobile';
mobileConfig.watchOptions = {
  poll: true,
  ignored: /node_modules/
};

Encore.reset();

module.exports = [fullConfig, mobileConfig];

result of entrypoints.json:

{
  "entrypoints": {
    "full": {
      "js": [
        "/build/full/js/runtime-a0244a.js",
        "/build/full/js/full-a0244a.js"
      ],
      "css": [
        "/build/full/css/full-a0244a.css"
      ]
    }
  }
}
    }
  }
}

result of manifest.json:

{
  "build/full.css": "/build/full/css/full-a0244a.css",
  "build/full.js": "/build/full/js/full-a0244a.js",
  "build/runtime.js": "/build/full/js/runtime-a0244a.js"
}

[Alymbek]

I have find temporary solution by asset() in twig:

<link href="{{ asset('build/full.css') }}" rel="stylesheet" />

<script src="{{ asset('build/runtime.js') }}"></script>
<script src="{{ asset('build/full.js') }}"></script>

[Alymbek]

and other solution:

var Encore = require('@symfony/webpack-encore');

////////////////////////////////////////////////////////////////////////////////
Encore
  .setOutputPath('public/build/')
  .setPublicPath('/build')
  .cleanupOutputBeforeBuild()
  .addEntry('full', './assets/js/full.js')
  .addEntry('mobile', './assets/js/mobile.js')
  .enableLessLoader()
  .enableBuildNotifications()
  .enableSourceMaps(!Encore.isProduction())
  .enableVersioning(Encore.isProduction())
  .enableSingleRuntimeChunk()

  .configureFilenames({
    css: 'css/[name]-[hash:6].css',
    js: 'js/[name]-[hash:6].js'
  })

const fullConfig = Encore.getWebpackConfig();
fullConfig.name = 'full';
fullConfig.watchOptions = {
  poll: true,
  ignored: /node_modules/
};

module.exports = fullConfig;

in this case I have correct outputs:
entrypoints.json

{
  "entrypoints": {
    "full": {
      "js": [
        "/build/js/runtime-0677c5.js",
        "/build/js/full-0677c5.js"
      ],
      "css": [
        "/build/css/full-0677c5.css"
      ]
    },
    "mobile": {
      "js": [
        "/build/js/runtime-0677c5.js",
        "/build/js/mobile-0677c5.js"
      ],
      "css": [
        "/build/css/mobile-0677c5.css"
      ]
    }
  }
}

manifest.json

{
  "build/full.css": "/build/css/full-0677c5.css",
  "build/full.js": "/build/js/full-0677c5.js",
  "build/mobile.css": "/build/css/mobile-0677c5.css",
  "build/mobile.js": "/build/js/mobile-0677c5.js",
  "build/runtime.js": "/build/js/runtime-0677c5.js"
}

[Lyrkan]

Hi @Alymbek,

In your first post you were using the same output path in both configs.
Since Webpack processes these two configs independently, each build will output its own entrypoints.json at the same location and only the last one will be kept.

Two solutions to this issue:

• the one you gave in your last response: putting everything in the same config so only one entrypoints.json file is generated
• using a different output path in each config to generate an entrypoints.json in each one of them (but I don't think that the Webpack Encore Bundle supports multiple packages yet...)

[Lyrkan]

Just an update related to the second solution since it looks like the Webpack Encore Bundle does in fact supports multiple builds:

webpack_encore:
  output_path: '%kernel.public_dir%/public/default_build'
  builds:
    foo: '%kernel.public_dir%/public/foo_build'
    bar: '%kernel.public_dir%/public/bar_build'

You can then specify them when calling Twig methods:

{# Default entrypoints.json file #}
{{ encore_entry_script_tags('main') }}
{{ encore_entry_link_tags('main') }}

{# Using the entrypoints.json file located in ./public/foo_build #}
{{ encore_entry_script_tags('foo_entry', null, 'foo') }}
{{ encore_entry_link_tags('foo_entry', null, 'foo') }}

{# Using the entrypoints.json file located in ./public/bar_build #}
{{ encore_entry_script_tags('bar_entry', null, 'bar') }}
{{ encore_entry_link_tags('bar_entry', null, 'bar') }}

Edit: doesn't seem that version has been tagged yet though

[seyfer]

I guess closed by this one
https://github.com/symfony/webpack-encore-bundle/pull/17

[Lyrkan]

Closing this since a new version of the WebpackEncoreBundle that supports multiple entrypoints.json files was released.

[jremen]

Isn't it possible to use multiple configs and merge entrypoints and manifests into one file entrypoins.js and manifest.js in default path?

We have really HUGE application (biggest newspaper website in country) with multiple subdomains for different parts of portal (ie. elections, car etc.)

The problem is that for front end development building all resources takes a lot of time which slows down development while only one part is worked on. For that purpose we decided to split encore webpack into multiple configs so front end team can launch encore watch only on required part. Problem is that we have lot of twig, with template overwriting in subdomains and we have lot of references to multiple CSS and JS files, separately for each domain. It's absolutely out of question to rewrite it from scratch to reference different entrypoints for each part.

We had used (and are using) one entrypoints.js for all resources but this will not be possible with multiple output paths for different configs.

So isn't there a way to have multiple configs, but let's say generate resources into one output path like we did before WITHOUT overwriting entrypoints and manifest files, but only generating common ones where everything is like it used to be?