[Theme] consider webpack-encore

[craigh]

http://symfony.com/blog/introducing-webpack-encore-for-asset-management

https://github.com/symfony/webpack-encore

http://symfony.com/doc/current/frontend.html

[Guite]

http://symfony.com/blog/new-in-symfony-3-3-manifest-based-asset-versioning
https://medium.com/@nioperas06/integrate-webpack-in-your-symfony-application-with-webpack-encore-ed338298a031
https://medium.com/a-young-devoloper/symfony-encore-an-awesome-library-4c7da3301139
symfony/webpack-encore#5
http://symfony.com/blog/new-in-symfony-3-4-http-immutable-responses
http://symfony.com/blog/new-in-symfony-3-4-default-request-context-for-assets
https://medium.com/modern-js-for-php-devs/modern-js-in-symfony-with-webpack-encore-a5d900e86d14
https://medium.com/modern-js-for-php-devs/react-starter-repo-with-symfony-4-and-webpack-encore-9773316474ce
http://aerendir.me/2018/04/06/managin-static-images-webpack-encore/
https://symfony.com/blog/encore-0-21-0-webpack-4-support-copy-files-support-webpackencorebundle
https://symfony.com/blog/new-in-symfony-5-1-remote-asset-manifest
https://github.com/symfony/recipes/tree/master/symfony/webpack-encore-bundle
https://github.com/symfony/recipes/tree/master/symfony/webpack-encore-pack

[Kaik]

This is straightforward we do not have to refactor anything.
Currently, our js in the core is so poor it won't be affected at all...
Features that webpack encore provides are far beyond what core currently needs/uses.

After installing we will have assets dir in our src folder where we can place all core assets sources.
Then on deploy, all assets will be compiled sass minified if needed and placed in web/build dir.
We could use it in "legacy" way.

window.Twig = require('twig');
window._ = require('underscore');

This way we can include jquery as well and all needed libraries.
It does have it's own "composer.json" and ''composer.lock" files so we can save our current versions of assets this way we will be able to manage all needed js css libraries without the need for all those "proxy" bundles...

[Kaik]

Hi so I have played a bit with it and I feel safer now in this matter so first what we need.
We need node.js - and yarn or npm as package managers.
Node.js can be installed in various ways and I recommend to install it via nvm - node version manager.
Then depending on how deeply we want to integrate we can:

• install only js side so encore via yarn webpack etc... and include files that are created in our assets listener.
• install php side and this can be done via composer or flex (at the moment there is one conflict)

Core assets can be declared directly src/assets/js and /css. All assets can be managed and processed by loaders.
We could completely move all asset packages from php side "composer" to webpack.

Php bundle which needs to be installed, enabled and then it will provide additional integration like twig etc.. I have not tested this yet.

I'm not sure how to handle modules and theme assets yet including bootstrap etc..

[Guite]

We could completely move all asset packages from php side "composer" to webpack.

This would also include bootstrap, font awesome, and so on, right?

Php bundle... I have not tested this yet.

Any documentation / feature overview?

I'm not sure how to handle modules and theme assets yet including bootstrap etc..

Whenever a module/theme is activated/deactivated webpack would be renewed I guess. It needs to scan/fetch all bundles to include their stuff. How does plain Symfony handle this? Let each bundle process encore for itself only?

[Kaik]

Ok so
1 yes
2 php bundle for sure provides twig integration so something similar to zasset but like I said I have not tested this yet.
3. Hmm yesterday I have read about dynamic asset load I believe there is a huge room for what we can do.

So let's recap it is a big change because it introduces another ecosystem. We will eventually move all php bundles that are asset related like bootstrap, polyfils and we will move it to encore as well zikula core config js etc.
Each time we build core from source encore will collect all assets process them sass less it will minifiy all js and css with other tools like cleaning from debug and console log stuff.
Compiled assets can be placed in web/build dir and from there zikula will include them when page loads.

Now let's say we have done that and we want to include jquery globally (there is a way to include it and call it when needed but we are not ready yet ;). So yarn use in a similar way to composer so yarn install jquery (there are lock files and etc.. just like composer for php) apart from yarn there is npm which is similar.

Ok so we create src/assets/js/global.js and src/assets/css/global.css we can use app or common whatever. Then we point to those files in webpack_config. (i will include my messed up configs)

There is a lot to learn as this is js environment and there is a lot of it the way they bundle and load and manage packages. For sure it is Symfony way and the difference is only that in 4x you would install it all via Flex what we do is we are doing that manually.

Below I have played with ckeditor and twigjs and underscore, webpack_config loads encore and encore is configured to load all other installed packages and global.js where I'm adding those packages to the window.

webpack_config

var Encore = require('@symfony/webpack-encore');
const path = require( 'path' );
const CKEditorWebpackPlugin = require( '@ckeditor/ckeditor5-dev-webpack-plugin' );
const { styles } = require( '@ckeditor/ckeditor5-dev-utils' );

Encore
    // directory where all compiled assets will be stored
    .setOutputPath('src/web/build/')
    // what's the public path to this directory (relative to your project's document root dir)
    .setPublicPath('/build')
    .addEntry('globals', './src/assets/js/globals.js')

    // allow sass/scss files to be processed
    .enableSassLoader()

//    .copyFiles([
//        {from: './node_modules/ckeditor/', to: 'ckeditor/[path][name].[ext]', pattern: /\.(js|css)$/, includeSubdirectories: false},
//        {from: './node_modules/ckeditor/adapters', to: 'ckeditor/adapters/[path][name].[ext]'},
//        {from: './node_modules/ckeditor/lang', to: 'ckeditor/lang/[path][name].[ext]'},
//        {from: './node_modules/ckeditor/plugins', to: 'ckeditor/plugins/[path][name].[ext]'},
//        {from: './node_modules/ckeditor/skins', to: 'ckeditor/skins/[path][name].[ext]'}
//    ])
//    .addLoader({test: /\.json$/i, include: [require('path').resolve(__dirname, 'node_modules/ckeditor')], loader: 'raw-loader', type: 'javascript/auto'})
    .enableSingleRuntimeChunk()
//    .cleanupOutputBeforeBuild()
//    .enableSourceMaps(!Encore.isProduction())
    // uncomment to create hashed filenames (e.g. app.abc123.css)
//    .enableVersioning(Encore.isProduction())
    .addPlugin(new CKEditorWebpackPlugin({
        // Main language that will be built into the main bundle.
        language: 'en',

        // Additional languages that will be emitted to the `outputDirectory`.
        // This option can be set to an array of language codes or `'all'` to build all found languages.
        // The bundle is optimized for one language when this option is omitted.
        additionalLanguages: 'all',

        // Optional directory for emitted translations. Relative to the webpack's output.
        // Defaults to `'translations'`.
        // outputDirectory: 'ckeditor5-translations',

        // Whether the build process should fail if an error occurs.
        // Defaults to `false`.
        // strict: true,

        // Whether to log all warnings to the console.
        // Defaults to `false`.
        // verbose: true
    }))
    // Disable default image loaders from encore
    .disableImagesLoader()
    // Use raw-loader for CKEditor icons only
    .addRule({
          test: /ckeditor5-[^/]+\/theme\/icons\/[^/]+\.svg$/,
          use: [ {
              loader: 'raw-loader'
          } ]
      })
    // Next one is pretty much the default encore rule for handling images but excluding CKEditor
    .addRule({
          test: /\.(svg|png|jpg|jpeg|gif|ico)/,
          exclude: /ckeditor5-[^/]+\/theme\/icons\/[^/]+\.svg$/,
          use: [{
              loader: 'file-loader',
              options: {
                  filename: 'images/[name].[hash:8].[ext]',
                  publicPath: '/build/'
              }
          }]
      })
    .addRule({
          test: /\.css$/,
          use: [
              {
                  loader: 'postcss-loader',
                  options: styles.getPostCssConfig( {
                      themeImporter: {
                          themePath: require.resolve( '@ckeditor/ckeditor5-theme-lark' )
                      },
                      minify: true
                  } )
              },
          ]
      })


    // uncomment if you use Sass/SCSS files
//    .enableSassLoader(function(options) {
//        options.includePaths = ['node_modules']
//    })

//    .addPlugin(new FloatLables([
//        // copies to {output}/static
//        { from: './assets/js', to: 'js', ignore: 'app.js'},
//        { from: './assets/img', to: 'img' }
//    ]))

    // uncomment for legacy applications that require $/jQuery as a global variable

    // empty the outputPath dir before each build
    .cleanupOutputBeforeBuild()
    // allow legacy applications to use $/jQuery as a global variable
     .autoProvidejQuery()

    .enableSourceMaps(!Encore.isProduction())

    // create hashed filenames (e.g. app.abc123.css)
    // .enableVersioning()

    // Enable TypeScript
//    .enableTypeScriptLoader(function(tsConfig) {})

;

// export the final configuration
module.exports = Encore.getWebpackConfig();

global.js

require('../css/globals.css');
require('bootstrap-float-label/dist/bootstrap-float-label.min.css');

window.Twig	= require('twig');
window._	= require('underscore');

require('jquery-ui');
require('jquery-ui/ui/widgets/sortable');
//require('@ckeditor/ckeditor5-editor-classic/src/classiceditor');

jQuery('body').on('click touch', '*[data-href]', goToHref);

// go to event
function goToHref(e) {
    window.location.href = jQuery(this).data('href');
    
    return false;
};
window.ClassicEditor	= require('@ckeditor/ckeditor5-build-classic');

[Guite]

Does encore already provide namespaces for Symfony bundles (like require('@zikulacontentmodule/my-module-specific-module');)?

[Kaik]

I do not think so... hmm might be because encore can scan all src and load whatever just need to configure or create loader and those loaders are like
https://hackernoon.com/webpack-creating-dynamically-named-outputs-for-wildcarded-entry-files-9241f596b065

[Kaik]

I think for '@zikulacontentmodule/my-module-specific-module' you would have to create, an npm package, but that twig load from webpack php bundle might use some sort of namespace that you can call it. We might be able to create simple loader that is scanning all themes and modules and then load them...

[Guite]

Convention directories in Symfony:

• /assets for application level asset files
• /public/build/ for the output

See https://symfony.com/doc/current/frontend/encore/simple-example.html#configuring-encore-webpack for example.

[craigh]

https://stackoverflow.com/q/61126886/2600812

[Kaik]

@craigh hmm... this is what I was referring to in #4032

So no assets compilation minification etc during module install - we can copy module assets to web folder but that is it - no webpack magic.

The only place where we can and we should use webpack atm is to manage core assets and js libraries that are supplied with the core so... jquery, jquery ui all core css, js and core modules as well...polyfils etc.. these files will be compiled minified and dumped in web/build directory...

This way we can provide default js toolbox for module developers so things like twig js, moment, maybe a lightweight framework, something more advanced than jquery to play with...

[Guite]

https://jmsche.fr/en/blog/build-assets-with-webpack-encore-on-github-actions

https://github.com/symfony/recipes/tree/master/symfony/webpack-encore-bundle
https://github.com/symfony/recipes/tree/master/symfony/webpack-encore-pack