Chapters

21 Chapters | 2:10:39 |

01

Hello Webpack Encore

6:40
02

Webpacking our First Assets

5:27
03

Twig Helpers, entrypoints.json & yarn Scripts

4:04
04

Modules: require() & import()

4:57
05

Importing External Libraries & Global Variables

6:38
06

Bootstrap & the Curious Case of jQuery Plugins

6:05
07

The Magic of Split Chunks

6:06
08

Importing 3rd Party CSS + Image Paths

8:54
09

Sass & Overriding Bootstrap Variables

8:10
10

Copying Files

8:11
11

Page-Specific JS: Multiple Entries

7:36
12

Entry Refactoring

7:04
13

Refactoring Autocomplete JS & CSS

5:21
14

Auto-Provide jQuery for Mischievous Packages

6:37
15

addStyleEntry(): CSS-Only Entrypoint

3:51
16

Support any Browser with PostCSS & Babel

6:00
17

browserslist: What Browsers do you need to Support?

6:04
18

Polyfills & Babel

4:35
19

The Single Runtime Chunk

6:31
20

Async Imports

5:42
21

Production Build & Deployment

6:03

> JavaScript Frameworks & Tools > Webpack Encore: Frontend like a Pro!

Buy Access to Course

19.

The Single Runtime Chunk

|

Autoplay

Previous Chapter

Next Chapter

Login or register to check out the script

6 Comments

Sort By

Login or Register to join the conversation

Mina-R 3 years ago edited

hello i am configuring the enableSingleRuntimeChunk() in the webpack.config.js but when i used it with the tooltip component from bootstrap
to make a tooltip in other entry about.js and the importing of the tooltip component is on the app.js the tooltip is not working, the tooltip is not working in about page i dont know why but as far as i know that enabling this feature shares the tooltip comp. between all of the entry points so why it doesn't work:

// app.js
/*
 * Welcome to your app's main JavaScript file!
 *
 * We recommend including the built version of this JavaScript file
 * (and its CSS file) in your base layout (base.html.twig).
 */


// any CSS you import will output into a single css file (app.scss in this case)



import './styles/app.scss';
import 'bootstrap'
import setDefaultFlag from "./js/setDefaultFlag";
import {Tooltip} from "bootstrap";

import $ from "jquery";

document.querySelectorAll('.dropdown_item_select').forEach((dropDown,key) => {

    dropDown.addEventListener('click', function() {
        let imagePath = this
            .children
            .item(dropDown[key])
            .children
            .item(dropDown[key])
            .getAttribute('src');
        document.querySelector('#dropdown_button').innerHTML =
            setDefaultFlag(imagePath,dropDown.textContent);
    });
});

and

// about.js
import $ from 'jquery';
import './styles/about.scss';
const My_tooltip =  $('#click_me');

const tooltip = new Tooltip(My_tooltip);
tooltip.setContent({ '.tooltip-inner': 'another title' })

|

sadikoff Mina-R 3 years ago

Hey @Mina-R,

yes it will be shared in compiled code, but in source code you still need to import it.

Cheers!

|

Josh 7 years ago

Hello I have a question regarding "The runtime.js file contains something called the "manifest", which is a fancy name that Webpack gives to code that contains some internal IDs that Webpack uses to identify different parts of your code."

I was looking into my own webpack configuration and from what I understand, the runtime.js generated doesn't seem to be change and the ID that might change would be in the chunks that I generate. If that's the case, would that mean the benefit of not building our big .js files as often is incorrect? Thanks!

|

weaverryan SFCASTS Josh 7 years ago

Hey Josh!

Yea... this stuff is super complicated - I've spent a lot of time looking into it for Encore... but it's also something that has changed over time :). So, you're correct that what's changing is the "id" that is used for each chunk. There are two important things to consider for this:

1) For a specific chunk, the id shouldn't change unnecessarily - like it shouldn't be called "1" and then suddenly "2" later. If I remember correctly, we use something in Encore (in production - it IS different in dev) to generate these in a static way so that they only change (I think) when the chunk filename changes.

2) When chunk ids do change (or new chunks are added) the second question is: in which file is this reflected? If we add a few new chunks to the system, we want those changes (ideally) to live in the small runtime.js and not big.js

Based on all of this, let me know if you're seeing something that doesn't make sense in your app.

Cheers!

1 |

seb-jean 7 years ago

When you said "I still do recommend treating each entry file like its own independent environment, even if there is some sharing.", do you recommend never using "enableSingleRuntimeChunk ()"?

|

MolloKhan SFCASTS seb-jean 7 years ago edited

Hey Sébastien J.

To the contrary, Ryan recommends to enable it but to be aware of the code sharing.

Cheers!

|

This tutorial works great with Symfony5!

Symfony 4 Webpack Encore

What PHP libraries does this tutorial use?

// composer.json
{
    "require": {
        "php": "^7.1.3",
        "ext-iconv": "*",
        "aws/aws-sdk-php": "^3.87", // 3.91.4
        "composer/package-versions-deprecated": "^1.11", // 1.11.99
        "doctrine/annotations": "^1.0", // 1.10.1
        "doctrine/doctrine-bundle": "^1.6.10", // 1.10.2
        "doctrine/doctrine-migrations-bundle": "^1.3|^2.0", // v2.0.0
        "doctrine/orm": "^2.5.11", // v2.7.2
        "knplabs/knp-markdown-bundle": "^1.7", // 1.7.1
        "knplabs/knp-paginator-bundle": "^2.7", // v2.8.0
        "knplabs/knp-time-bundle": "^1.8", // 1.9.0
        "league/flysystem-aws-s3-v3": "^1.0", // 1.0.22
        "league/flysystem-cached-adapter": "^1.0", // 1.0.9
        "liip/imagine-bundle": "^2.1", // 2.1.0
        "nexylan/slack-bundle": "^2.0,<2.2.0", // v2.1.0
        "oneup/flysystem-bundle": "^3.0", // 3.0.3
        "php-http/guzzle6-adapter": "^1.1", // v1.1.1
        "phpdocumentor/reflection-docblock": "^3.0|^4.0", // 4.3.0
        "sensio/framework-extra-bundle": "^5.1", // v5.3.1
        "stof/doctrine-extensions-bundle": "^1.3", // v1.3.0
        "symfony/asset": "^4.0", // v4.2.5
        "symfony/console": "^4.0", // v4.2.5
        "symfony/flex": "^1.9", // v1.21.6
        "symfony/form": "^4.0", // v4.2.5
        "symfony/framework-bundle": "^4.0", // v4.2.5
        "symfony/property-access": "4.2.*", // v4.2.5
        "symfony/property-info": "4.2.*", // v4.2.5
        "symfony/security-bundle": "^4.0", // v4.2.5
        "symfony/serializer": "4.2.*", // v4.2.5
        "symfony/twig-bundle": "^4.0", // v4.2.5
        "symfony/validator": "^4.0", // v4.2.5
        "symfony/web-server-bundle": "^4.0", // v4.2.5
        "symfony/webpack-encore-bundle": "^1.4", // v1.5.0
        "symfony/yaml": "^4.0", // v4.2.5
        "twig/extensions": "^1.5" // v1.5.4
    },
    "require-dev": {
        "doctrine/doctrine-fixtures-bundle": "^3.0", // 3.1.0
        "easycorp/easy-log-handler": "^1.0.2", // v1.0.7
        "fzaninotto/faker": "^1.7", // v1.8.0
        "symfony/debug-bundle": "^3.3|^4.0", // v4.2.5
        "symfony/dotenv": "^4.0", // v4.2.5
        "symfony/maker-bundle": "^1.0", // v1.11.5
        "symfony/monolog-bundle": "^3.0", // v3.3.1
        "symfony/phpunit-bridge": "^3.3|^4.0", // v4.2.5
        "symfony/stopwatch": "4.2.*", // v4.2.5
        "symfony/var-dumper": "^3.3|^4.0", // v4.2.5
        "symfony/web-profiler-bundle": "4.2.*" // v4.2.5
    }
}

What JavaScript libraries does this tutorial use?

// package.json
{
    "devDependencies": {
        "@symfony/webpack-encore": "^0.27.0", // 0.27.0
        "autocomplete.js": "^0.36.0",
        "autoprefixer": "^9.5.1", // 9.5.1
        "bootstrap": "^4.3.1", // 4.3.1
        "core-js": "^3.0.0", // 3.0.1
        "dropzone": "^5.5.1", // 5.5.1
        "font-awesome": "^4.7.0", // 4.7.0
        "jquery": "^3.4.0", // 3.4.0
        "popper.js": "^1.15.0",
        "postcss-loader": "^3.0.0", // 3.0.0
        "sass": "^1.29.0", // 1.29.0
        "sass-loader": "^7.0.1", // 7.3.1
        "sortablejs": "^1.8.4", // 1.8.4
        "webpack-notifier": "^1.6.0" // 1.7.0
    }
}

Previous Chapter

Next Chapter