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

04.

watch + Install jQuery with Yarn

|

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

12 Comments

Sort By

Login or Register to join the conversation

Deuklyoung K. 7 years ago

solution of watch no working in Windows Subsystem for Linux

https://github.com/webpack/...

Add this to your webpack configuration file:

watchOptions: {
poll: true
},

1 |

Victor SFCASTS Deuklyoung K. 7 years ago edited

Hey Deuklyoung K. ,

Thanks for sharing this info for our Windows users! Might be useful

Cheers!

|

plashenkov 6 years ago edited

Why use --dev in yarn add jquery --dev? You are going to use jQuery in the final bundle, it should not be included as --dev.

|

Victor SFCASTS plashenkov 6 years ago

Hey Yuri,

That's a controversial question. Technically, you won't use it from the node_modules directory/ on production :) Actually, you may not have this node_modules/ directory at all on your production server because *everything* is packed with Webpack Encore into public/build/ directory. This is the only files you need on production, and so node_modules/ including jQuery and other deps are just needed during the build stage that means it's just dev dependencies.

But it does not important at all, you can add those deps without `--dev` and it will still work. But separate your Node deps with --dev or not is only useful for node applications, we have a PHP application here :)

I hope this clearer for you know.

Cheers!

|

plashenkov Victor 6 years ago

Thanks, Victor. Yep, I've already found your reply to the similar question under another video here. I see your point and agree. It looks like, really, it depends. Here is some useful conversation and info: https://github.com/webpack/...

|

Lijana Z. 7 years ago

But what if I want to use jQuery in every page? it sucks to require it in every script file, it is code repetition. How to solve this?

|

Victor SFCASTS Lijana Z. 7 years ago

Hey Coder,

Actually, it's not code repetition, it's just only one line of code. And it's a good idea to explicitly show your dependencies, so if all your JS files requires jQuery, so it's OK to show it, i.e. require it in every file explicitly. You do the same with Symfony services, I bet you inject entity manager in many services - but that's a good practice :)

Cheers!

|

chieroz 8 years ago

hello Ryan, for some strange reason I am not able to get webpack "watch" my files.

My setup is a Vagrant VM with Ubuntu 16.04 and PHPStorm in a MacBook Pro with High Sierra.
If I ssh into the VM and change the files with vim inside the guest machine, webpack detects the change I make.
If I change my file with PHPStorm (or any other editor in the host machine) it remains idle.
This seems weird, do you know how I could solve this rather annoying problem?

Thank you and, BTW, Happy New Year and thank you for your great tutorials!

carlo

|

Victor SFCASTS chieroz 8 years ago

Hey Carlo,

Hm, tricky question. It's always tricky when we're talking about virtualization :) Probably you need to wait a bit more time? Btw, where do you run webpack watch, on the guest or host machine? Are you sure you have 2 way sync of your files? I mean, as you said, vagrant syncs changes from guest machine to host machine if you do some changes on your *guest* machine. But probably changes do not sync when you do the reverse: do some changes on your *host* machine. So what type of sync do you have? I heard, NFS is probably the best 2 way syncing with a good performance, do you have a different one? See the list of available types here: https://www.vagrantup.com/d... .

Thanks! Happy New Year to you too!

Cheers!

|

chieroz Victor 8 years ago

Hi Victor,

thank you for your reply. no matter how long I wait, the watch option remains idle. I run webpack on the guest machine and yes, I have NFS and sync is bidirectional: if I change a file inside the guest, almost immediately I see the change in the host and vice versa.

I will keep investigate, thank you for your help.

Cheers

1 |

weaverryan SFCASTS chieroz 8 years ago edited

Hey chieroz!

Happy new year back to you! Check out this issue: https://github.com/symfony/webpack-encore/issues/194

Does it help? It's for Encore, but that ultimately, you just need to set the watchOptions key with poll: true.

Let us know if it helps!

Cheers!

|

chieroz weaverryan 8 years ago

hello Ryan,

YOU are the man. setting the watchOption poll:true now watch works also with VirtualBox and NFS.

thank you so much,

cheers,

carlo

7 |

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