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

09.

ProvidePlugin & Global Vars

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

Previous Chapter

Next Chapter

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

7 Comments

Sort By

Chris 8 years ago edited

Hey guys,

my problem should be simple enough, but I'm stuck :-) :

I want to add the bootstrap-datepicker form input widget to one of my forms as we have done in the <a href="https://knpuniversity.com/screencast/symfony-forms/date-picker-field">Symfony-Forms Datepicker Field Tutorial</a>, but now with the power of webpack.

This is, how it looks right now:

import $ from 'jquery';
import 'jquery-ui';
import 'bootstrap';

import('bootstrap-datepicker');
import 'bootstrap-datepicker/dist/css/bootstrap-datepicker.css';

$(document).ready(function() {
    $('#myDatepicker').datepicker();
});

In the console I get the following error:
"Uncaught TypeError: (0 , _jquery2.default)(...).datepicker is not a function".

Thanks for any help,

Cheers!

weaverryan SFCASTS Chris 8 years ago edited

Hiya Chris

Yea, jQuery plugins are one of the most difficult things with Webpack (it's just the way they both work). But actually, I did some digging, and it looks like the Bootstrap date picker *has* been updated to work nicely with Webpack (if you're curious, it's this part: https://github.com/uxsoluti....

So, this plugin should work even if you did *not* use the ProvidePlugin (but that plugin should not hurt anything). So... I'm not sure! But, I have one thing for you to try: https://github.com/Eonasdan... (if that doesn't work, also try the comment below it, but I believe the *first* comment is more correct).

If this fixes the problem, can you let me know? It would actually be a very interesting thing that I wasn't aware of and would need to dig into a bit further. If it doesn't fix it, let me know too!

Cheers!

Chris weaverryan 8 years ago edited

Hi weaverryan,

it almost feels like magic, ... with almost no effort. I already have used the updated version but it starts working right after inserting the following code, as you have suggested:


resolve: {
    alias: {
        'jquery': path.join(__dirname, 'node_modules/jquery/dist/jquery'),
    }
}

This is a good progress for me, since I'm indeed struggling with jQuery plugins to make it work in my project.

Thanks and have a nice day!

weaverryan SFCASTS Chris 8 years ago edited

Hey Chris!

Ah, thanks for following up with me on this! This is interesting - I don't like it to be honest :). As I mentioned, the date picker is already "written well": if it detects it's in a module environment (like Webpack), then it literally uses require('jquery'). That's awesome! Because it means that it will require the same jquery that we're using and modify it to add the bootstrap functionality.

Except... apparently... it is not using the same jquery :/. By adding the alias above, you're explicitly telling webpack: "Hey: when someone requires jquery, always use this file". It should be doing that already... but for some reason, the jquery that is being passed to the date picker and the one being passed to your code when you use require appears to be different. I'll need to look into this further - it's not something I've seen before. But, it at least makes some sense: unlike PHP, in Node, it's possible for 2 different dependencies of your project to have their own private dependencies. It would be as if, in PHP, your project used version 1.2 of Monolog while Doctrine (a dependency of your project) simultaneously uses version 1.3. That's not possible in PHP, but (for better or worse, it has pros and cons) that is possible in Node land :).

But you are safe with that fix - it's no magic. Hopefully now it makes a bit more sense at least!

Cheers!

Ángel Manuel Marqués Ruiz 8 years ago

Great videos Ryan! I got some questions, is webpack encore a topic for this course? and.. Do we have a date for when the problem of big file sizes will be fixed? I took a glance at the programmed chapters of this course and didn't see it mentioned.

weaverryan SFCASTS Ángel Manuel Marqués Ruiz 8 years ago

Hey!

We're going to cover Encore in a different tutorial - I want to show Webpack by itself first :).

About the big file sizes - are you asking about the files in this tutorial? I mean, that jQuery is packaged inside each entry? If so, it will be around 2 weeks from now - it involves the CommonsChunkPlugin - it's not on the chapter list yet, but you'll see it on the list in about a week, then released about a week later. Sorry for the wait - we release chapters while we're still recording and finishing other parts of the tutorial :).

Cheers!

Ángel Manuel Marqués Ruiz weaverryan 8 years ago

Perfect, that's nice to know. Thank you for all the hard work!

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

Chapters

ProvidePlugin & Global Vars

Share this awesome video!

Keep on Learning!

7 Comments

Delete the comment?

What PHP libraries does this tutorial use?

What JavaScript libraries does this tutorial use?