Chapters

37 Chapters | 3:43:03 |

01

The Power of require

9:00
02

Your First Webpack

4:05
03

webpack.config.js

5:41
04

watch + Install jQuery with Yarn

7:56
05

Requiring SweetAlert2

4:09
06

Modularize our Code

7:45
07

Multiple Entries / Pages

6:15
08

Legacy Libraries & global jQuery

5:05
09

ProvidePlugin & Global Vars

4:12
10

babel-loader

4:40
11

babel-loader Options & Polyfill

4:06
12

Require CSS Files

9:30
13

Images in CSS (file-loader)

7:01
14

Bootstrap CSS & Fonts

4:00
15

Font Awesome & file-loader [hash]

4:10
16

copy-webpack-plugin

5:21
17

Sass with sass-loader

3:17
18

Bootstrap Sass & resolve-url-loader

6:28
19

Tweaking Bootstrap's Sass

4:10
20

Sourcemaps & Debugging

6:03
21

jQuery & Legacy JS in your Template

7:46
22

Passing Server Data to JS

5:34
23

FOSJsRoutingBundle

4:25
24

Lodash & requiring Partial Libraries

3:55
25

ES6 import & export

7:49
26

CommonsChunkPlugin: Shared/Vendor Entry

5:14
27

Optimizing the "Commons" Chunk

5:46
28

webpack-dev-server

6:13
29

Hot Module Replacement

6:43
30

extract-text-webpack-plugin

8:00
31

Production Build

5:09
32

Minify CSS & DefinePlugin

9:29
33

Versioning & Cache Busting

4:37
34

Versioning manifest.json

5:01
35

Versioning Optimizations

6:40
36

Code Splitting

10:58
37

Webpack Visualizer

6:50

> JavaScript Fundamentals > JavaScript for PHP Geeks: Webpack for Module Loading Awesomeness

Buy Access to Course

13.

Images in CSS (file-loader)

|

Autoplay

Keep on Learning!

If you liked what you've learned so far, dive in! Subscribe to get
access to this tutorial plus video, code and script downloads.

Start your All-Access Pass

Buy just this tutorial for $12.00

Previous Chapter

Next Chapter

With a Subscription, click any sentence in the script to jump to that part of the video!

Login Subscribe

Login or register to check out the script

10 Comments

Sort By

Login or Register to join the conversation

julien_bonnier 6 years ago edited

Hey,

Just ran into a problem where (using webpack 4) my url('../images/dumbbell-mini.png') was replaced with url([object Module]).

I fixed it with esModule to false in my file loader options


    {
        test: /\.(png|jpg|jpeg|gif|ico|svg)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              esModule: false,
            }
          }
        ]
      }```


Hope this helps

1 |

Marcos Lorente julien_bonnier 6 years ago edited

Hey Julien, I'm trying to fix as you mentioned but still not working.

url([object Module])

|

Victor SFCASTS Marcos Lorente 6 years ago

Hey Marcos,

I haven't tried the solution yet... but did you restarted your webpack encore after making those changes? Encore requires to be restarted on any changes in webpack.config.js file.

I hope this helps!

Cheers!

|

Victor SFCASTS julien_bonnier 6 years ago

Hey Julien,

Thank you for sharing this workaround with others!

Cheers!

|

Ian-M 5 years ago edited

It's happy with yarn add file-loader@5 --dev but not yarn add file-loader --dev which causes ERROR in ./web/assets/images/dumbbell-mini.png<br />Module build failed: TypeError [ERR_INVALID_ARG_TYPE]: The "from" argument must be of type string. Received type undefined

|

weaverryan SFCASTS Ian-M 5 years ago edited

Thanks Ian M.! We'll add a note about using v5 if you want to follow the tutorial :).

|

Dan_M 8 years ago

Ryan,

This is really good stuff, but I've hit a snag! When I code along with you on this episode, I don't get the 404 error on mini-dumbbell. Instead I get no image and no error. When I inspect the element, I see it has this style:
background: url([object Object]) center center no repeat;

Changing the publicPath as you showed did not help.

What in the world?!!

|

weaverryan SFCASTS Dan_M 8 years ago edited

Yo Dan_M!

Woooh! That's totally weird! But, this might be the problem: https://github.com/webpack-contrib/html-loader/issues/140

If you lock your version of file-loader 0.11.2, does that help? I've not seen this issue before, but it's sort weird, that I searched for a bug first :).

If that doesn't help, can you post your webpack.config.js and package.json files?

Cheers!

|

Dan_M weaverryan 8 years ago edited

weaverryan,

OK, this is really weird! I downgraded to 0.11.2 and it worked. Then I upgraded to 1.1.4, and...it STILL worked.

I don't know what version of file-loader I had originally, but now it just works and I can't break it. Go figure!

|

weaverryan SFCASTS Dan_M 8 years ago

Oh man, super weird. Honestly, the package version resolution in npm/yarn still doesn't seem to be as strong as Composer. I *still* sometimes do an rm -rf node_modules to reset things!

Anyways, happy it's working now :)

|

This tutorial explains the concepts of an old version of Webpack using an old version of Symfony. The most important concepts are still the same, but you should expect significant differences in new versions.

Symfony 3 Webpack 3

What PHP libraries does this tutorial use?

// composer.json
{
    "require": {
        "php": "^7.2.0",
        "symfony/symfony": "3.3.*", // v3.3.16
        "twig/twig": "2.10.*", // v2.10.0
        "doctrine/orm": "^2.5", // v2.7.0
        "doctrine/doctrine-bundle": "^1.6", // 1.10.3
        "doctrine/doctrine-cache-bundle": "^1.2", // 1.3.5
        "symfony/swiftmailer-bundle": "^2.3", // v2.6.3
        "symfony/monolog-bundle": "^2.8", // v2.12.1
        "symfony/polyfill-apcu": "^1.0", // v1.4.0
        "sensio/distribution-bundle": "^5.0", // v5.0.22
        "sensio/framework-extra-bundle": "^3.0.2", // v3.0.26
        "incenteev/composer-parameter-handler": "^2.0", // v2.1.2
        "friendsofsymfony/user-bundle": "^2.0", // v2.1.2
        "doctrine/doctrine-fixtures-bundle": "~2.3", // v2.4.1
        "doctrine/doctrine-migrations-bundle": "^1.2", // v1.3.2
        "composer/package-versions-deprecated": "^1.11", // 1.11.99
        "friendsofsymfony/jsrouting-bundle": "^1.6" // 1.6.0
    },
    "require-dev": {
        "sensio/generator-bundle": "^3.0", // v3.1.6
        "symfony/phpunit-bridge": "^3.0" // v3.3.5
    }
}

What JavaScript libraries does this tutorial use?

// package.json
{
    "dependencies": [],
    "devDependencies": {
        "babel-core": "^6.25.0", // 6.25.0
        "babel-loader": "^7.1.1", // 7.1.1
        "babel-plugin-syntax-dynamic-import": "^6.18.0", // 6.18.0
        "babel-preset-env": "^1.6.0", // 1.6.0
        "bootstrap-sass": "^3.3.7", // 3.3.7
        "clean-webpack-plugin": "^0.1.16", // 0.1.16
        "copy-webpack-plugin": "^4.0.1", // 4.0.1
        "core-js": "^2.4.1", // 2.4.1
        "css-loader": "^0.28.4", // 0.28.4
        "extract-text-webpack-plugin": "^3.0.0", // 3.0.0
        "file-loader": "^0.11.2", // 0.11.2
        "font-awesome": "^4.7.0", // 4.7.0
        "jquery": "^3.2.1", // 3.2.1
        "lodash": "^4.17.4", // 4.17.4
        "node-sass": "^4.5.3", // 4.5.3
        "resolve-url-loader": "^2.1.0", // 2.1.0
        "sass-loader": "^6.0.6", // 6.0.6
        "style-loader": "^0.18.2", // 0.18.2
        "sweetalert2": "^6.6.6", // 6.6.6
        "webpack": "^3.4.1", // 3.4.1
        "webpack-chunk-hash": "^0.4.0", // 0.4.0
        "webpack-dev-server": "^2.6.1", // 2.6.1
        "webpack-manifest-plugin": "^1.2.1" // 1.2.1
    }
}

Previous Chapter

Next Chapter