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

01.

The Power of require

|

Autoplay

Next Chapter

Login or Register to check out the script

19 Comments

Sort By

Login or Register to join the conversation

Max A. 7 years ago edited

there What icon plugin do you use for PhpStorm?

I would like to install that :)

|

weaverryan SFCASTS Max A. 7 years ago edited

Yo Max A.!

Um... dang! I have no idea! I actually don't think I have anything special as far as icons go. What icons are you seeing that are different on my setup? I'm happy to share anything I can :).

Cheers!

|

Max A. weaverryan 7 years ago edited

weaverryan
Like this one

https://drive.google.com/op...

|

weaverryan SFCASTS Max A. 7 years ago edited

Hey Max A.!

Interesting. I can answer a few of those. For the Composer files, I use the "PHP composer.json support" plugin - which I think adds this. For the .gitignore file, I use the ".gitignore" plugin.

But for the others - I'm not sure - I don't believe I have anything special installed to have the JSON icon, for example. That is a mystery :).

Cheers!

|

Shaun T. 7 years ago

Hey guys,

In the original replog app you were using underscore for templating, but it seems like you are not in this version, any reason for this?

|

weaverryan SFCASTS Shaun T. 7 years ago edited

Hey Shaun T.!

Good catch ;). No big reason in particular. But, in the 2nd screencast in this track, we introduce template strings, which allow you to create a simple templating engine without any outside tools - https://symfonycasts.com/sc.... Of course, it's not that there is a disadvantage to using _ for templating - in fact, it's got more features. But for our simple use-case, we could easily use template strings to keep everything in plain, boring JavaScript.

Cheers!

|

Shaun T. weaverryan 7 years ago edited

Awesome, I'll check that out, thanks weaverryan :)

|

Michael 8 years ago

Hi Ryan, I think you have typo in login, you have ron_furgundy but it should be ron_furgandy

|

MolloKhan SFCASTS Michael 8 years ago

Hey Michael

You are totally right! We have a typo in our script.
Thanks for letting us know, we will fix it as soon as possible.

Cheers!

|

Victor SFCASTS Michael 8 years ago

Thanks! Fixed in https://github.com/knpunive...

Cheers!

|

Maki V. 8 years ago

Hi guys!

As always - thanks for interesting stuff! I am a Symfony backend developer, but very interested in code design and philosophy. I have been wondering for quite some time about webpacking - as for doing so, your application becomes depending on enabled javascript in your browser. My question is more philosophical, but in my opinion very important.

Should application's core functionality be depending on enabled javascript inside your browser?

This question came up to my mind after reading this interesting article on server medium.org: https://medium.freecodecamp...

and seeing this diagram with an interesting concept: https://cdn-images-1.medium...

I like the idea that backend just sends data via some kind of API and javascript using React renders the view - but in doing so you are depending on javascript in your browser and in doing so - breaking application for your non-js users.

What are your thoughts about this concept, guys?

|

weaverryan SFCASTS Maki V. 8 years ago edited

Hey Milan V.!

GREAT question. And, it's something I've thought a lot about, but am not exactly an expert. But, for what it's worth, here are my thoughts.

Years ago, I would develop a site that worked with with and without JavaScript. I don't do that anymore. First, I think we're beyond the time where users having "JavaScript disabled" is a problem. Also (and I'm FAR from an expert on this topic), I no longer think that a well-written JavaScript application has any "accessibility" concerns. Years ago, you may have wanted to make your site work without JavaScript, because JavaScript confused screen readers for blind users. That is no longer the case (you CAN still build badly accessible sites using JS, but the point is, accessibility tools now understand JS, so if you render an accessible-friendly site purely in JS, it's no problem).

So, if JS doesn't present accessibility problems, nor (probably) search engine indexing problems, and 0% of your users have JavaScript disabled, it becomes very difficult to make a business case for the added time and complexity if making your site work without JS. If you turn JS off for KnpU, the site will somewhat work, but the most important parts will be broken.

As an experiment, I turned JavaScript off and went to a few HUGE news sites. The first site I went to did not load at all, beyond the header and the footer. Yep, 0 content with JavaScript disabled. If a huge new site doesn't care, you probably shouldn't either.

So, yea! When we think about rendering a pure JS front-end versus something more traditional, I give more weight to (A) what is your team's expertise with JavaScript (B) Do you really need a full JS frontend, or would it be easy enough to render HTML and make parts of your site super fancy and (C), even though it shouldn't be a problem, I still somewhat fear search engine indexing problems. But, I think this may be an out-of-date view, honestly.

Anyways, I hope this helps!

Cheers!

3 |

Maki V. weaverryan 8 years ago

Yo @weaverryan!

Love your thoughts! I think you just covered all of the main issues people could have. :))

I would like to add just a few bits out of my head that indirectly confirms your thoughts.

If you (the person reading this) are a Google Chrome user, press CTRL + SHIFT + I (open your DevTools) and navigate into Settings, you'll notice that the "Disable JavaScripts" option is located under the "Debugger" option, indicating, that it is not meant for casual user to operate like that. I think the main purpose of that option still available in the browsers is just for a testing environment that might come out by using certain browser add-ons. Thus, Google developers don't actually think that disabled JS is a standard behaviour (and I certainly cannot argue with Google on that one :)).

There are yearly a lot of statistics about the most used programming languages all around the world. JavaScript is still on the front lines as "One of the most used programming language of all time". If people think that JS has no value, they would abandon it and use alternatives that might fulfil their needs.

and lastly - I am so glad you made your own research about how many sites work without enabled JS! This is one of the fastest growing real estate sites in the Czech Republic: https://www.ulovdomov.cz/ (for anyone interested in Czech - "ulov domov" means "catch home"). I am using it as an example because it is composed more-less only by JS and remote API. Search engines are aware of pages located on that domain and work nicely with its routing system. If you disable JS in your browser and try to access the site, 0% of it will work. Another indication that developers just count with enabled JS nowadays.

I would just add, that it is nice to let a user know about need for enabled JS by some kind of notification - to let them be aware of that fact.

Anyway, thanks for your help, Ryan! Always love your comments/videos and hope we will discuss more stuff in the future! :)

3 |

MolloKhan SFCASTS Maki V. 8 years ago edited

Hey Milan V.
Thanks for sharing your thoughts :)
Showing a message when a user has JS disabled, sounds like a good idea

Cheers!

|

gaotian 8 years ago

Hi,
Thanks for the tuto, I think there may be a small typo in the script with : "const Helper = require('./RepLogHelper'); " for "const Helper = require('./RepLogAppHelper');" (not in the video and in the text before ^^)

|

MolloKhan SFCASTS gaotian 8 years ago

Hey Gaotian!

You are right, we have a tiny error in our script, we are going to fix it as soon as possible :)
Thanks for letting us know!

Have a nice day

|

mudita MolloKhan 8 years ago

nowadays it works better with: import Helper from './RepLogAppHelper'
(otherwise I got the error: Uncaught TypeError: Class constructor Helper cannot be invoked without 'new')

love your tutos <3

|

mudita again mudita 8 years ago

oups wrong, this is fine, I must have done something wrong, please delete my com (^^;)
(also I checked the option disable HTTP cache when dev tools are open)

|

Victor SFCASTS mudita again 8 years ago

Hey Mudita,

Don't worry about your comments, we're not going to remove them ;)
Glad you solved the problem!

Cheers!

|

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
    }
}

Next Chapter