Chapters

13 Chapters | 1:23:35 |

01

Installing Encore

8:51
02

Our First Encore

8:02
03

Require Outside Libraries

5:46
04

Component Organization

5:01
05

Multiple Pages / Entries

4:38
06

jQuery Plugins / Bootstrap

6:45
07

Require CSS!?

9:19
08

Handling Images with the CopyPlugin

6:30
09

Sass & Sourcemaps

5:30
10

Integrating FOSJsRoutingBundle

4:31
11

ES6 Import & Export

6:00
12

Building for Production

6:44
13

Asset Versioning & Cache Busting

6:01

This tutorial has a new version, check it out!

> Webpack Encore: A Party for your Assets

Buy Access to Course

07.

Require CSS!?

|

Autoplay

Previous Chapter

Next Chapter

Login or register to check out the script

9 Comments

Sort By

Login or Register to join the conversation

dgoosens 6 years ago edited

right... so I figured it out...
it has to do with the default behavior in the url-loader module
(see https://stackoverflow.com/questions/59114479/when-i-using-file-loader-and-html-loader-in-webpack-the-src-attr-of-image-gonna/59115624#59115624)

So I had to disable the esModule in the config
This is done with:


// ./webpack.config.js
.configureUrlLoader({
        images: {
            esModule: false
        }
    })

Once I set this, everything runs smooth as hell

1 |

dgoosens dgoosens 5 years ago edited

just for the record, you should also do so for the fonts

`
// ./webpack.config.js
.configureUrlLoader({

images: {
    esModule: false
},
fonts: {
    esModule: false
}

})
`

|

Jamey-C 2 years ago

"I am using PhpStorm 2023 and I cannot find the 'synchronize build' button. "

|

Victor SFCASTS Jamey-C 2 years ago

Hey Jamey,

I think it's called "Reload from Disk" now.

Cheers!

|

dgoosens 6 years ago edited

hi

I think I followed the steps as indicated...
Yet.... my CSS images result in


    [object Module]

so this CSS:


    .navbar-brand {
        background: url('../css_images/ardenneimmo_logo.png') center left no-repeat;
    }

becomes this once built:


    .navbar-brand {
        background: url([object Module]) center left no-repeat;
    }

Spent countless hours on this...
Any suggestions ?

|

Victor SFCASTS dgoosens 6 years ago

Hey Dmitri,

It looks like you figured it out here: https://symfonycasts.com/sc...

Good job!

Cheers!

|

Dmitriy 7 years ago

Help me please. How can I deactivate the plugin ExtractText Plugin? Which is enabled by default.

|

Victor SFCASTS Dmitriy 7 years ago edited

Hey Dmitriy,

You can do it like:


Encore.configureExtractTextPlugin((options) => {
    options.disable = true;
});

But keep in mind that ExtractTextPlugin was removed and replaced with mini-css-extract-plugin in Webpack 4. Accordingly, extractTextPluginOptionsCallback() will be removed soon.

|

Dmitriy Victor 7 years ago

Thank you, Victor. Everything works perfectly. Thanks for the recommendations.

|

Symfony 4 Encore 0.19

What PHP libraries does this tutorial use?

// composer.json
{
    "require": {
        "php": "^7.2.0",
        "ext-iconv": "*",
        "composer/package-versions-deprecated": "^1.11", // 1.11.99
        "doctrine/doctrine-bundle": "^1.6", // 1.8.1
        "doctrine/doctrine-cache-bundle": "^1.2", // 1.3.2
        "doctrine/doctrine-fixtures-bundle": "~3.0", // 3.0.2
        "doctrine/doctrine-migrations-bundle": "^1.2", // v1.3.1
        "doctrine/orm": "^2.5", // v2.7.2
        "friendsofsymfony/jsrouting-bundle": "^2.2", // 2.2.0
        "friendsofsymfony/user-bundle": "dev-master", // dev-master
        "sensio/framework-extra-bundle": "^5.1", // v5.1.5
        "symfony/asset": "^4.0", // v4.0.4
        "symfony/console": "^4.0", // v4.0.4
        "symfony/flex": "^1.0", // v1.17.6
        "symfony/form": "^4.0", // v4.0.4
        "symfony/framework-bundle": "^4.0", // v4.0.4
        "symfony/lts": "^4@dev", // dev-master
        "symfony/monolog-bundle": "^3.1", // v3.1.2
        "symfony/polyfill-apcu": "^1.0", // v1.7.0
        "symfony/serializer-pack": "^1.0", // v1.0.1
        "symfony/swiftmailer-bundle": "^3.1", // v3.1.6
        "symfony/twig-bundle": "^4.0", // v4.0.4
        "symfony/validator": "^4.0", // v4.0.4
        "symfony/yaml": "^4.0", // v4.0.4
        "twig/twig": "2.10.*" // v2.10.0
    },
    "require-dev": {
        "symfony/debug-pack": "^1.0", // v1.0.4
        "symfony/dotenv": "^4.0", // v4.0.4
        "symfony/phpunit-bridge": "^4.0", // v4.0.4
        "symfony/web-server-bundle": "^4.0" // v4.0.4
    }
}

What JavaScript libraries does this tutorial use?

// package.json
{
    "devDependencies": {
        "@symfony/webpack-encore": "^0.19.0", // 0.19.0
        "bootstrap": "3", // 3.3.7
        "copy-webpack-plugin": "^4.4.1", // 4.4.1
        "font-awesome": "4", // 4.7.0
        "jquery": "^3.3.1", // 3.3.1
        "node-sass": "^4.7.2", // 4.7.2
        "sass-loader": "^6.0.6", // 6.0.6
        "sweetalert2": "^7.11.0", // 7.11.0
        "webpack-notifier": "^1.5.1" // 1.5.1
    }
}

Previous Chapter

Next Chapter