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

31.

Production Build

|

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

13 Comments

Sort By

Login or Register to join the conversation

Rainer-S 6 years ago edited

In the Windows Powershell the following command works:


$env:NODE_ENV="production"; .\node_modules\.bin\webpack --watch

Or alternatively, as already described as video comment


yarn  add cross-env --dev
cross-env NODE_ENV=production .\node_modules\.bin\webpack --watch

|

Victor SFCASTS Rainer-S 6 years ago

Hey Sven,

Thank you for this tip for Windows users!

Cheers!

|

Anton B. 6 years ago

Invalid file name here when downloading. (test-upload2).mp4

|

Victor SFCASTS Anton B. 6 years ago

Hey Anton,

Thank you one more time for reporting it! This one is fixed as well now.

Cheers!

|

Lijana Z. 7 years ago

There is one mistake where you say - "If you are on windows" - answer should be - switch to linux based system :)

I myself like windows, things work better, except for development - it causes too much trouble, so I have xubuntu and windows on my computer. I actually still develop my side small projects on windows which do not make any money, but nothing fancy like webpack in the technology stack.

|

weaverryan SFCASTS Lijana Z. 7 years ago

Haha, yea, it does usually make life more difficult. The new Unix subsystem is helping things - but it's still the "odd" operating system for development :).

Cheers!

|

GDIBass 8 years ago edited

Looks like webpack 4 is:


if ( process.env.NODE_ENV === 'production' ) {
        webpackConfig.optimization.minimize = true;
}

|

Aircury 8 years ago

Hi Ryan,

On 2:04 you change `module.exports` to `const webpackConfig`, and then before exporting it you push to it, ... but it was const! Why does this work?
Coming from the PHP world this _sounds_ wrong.

Thanks.

|

Victor SFCASTS Aircury 8 years ago

Hey Jose,

Haha, because "const" keyword when you declare variables in JS means a bit different than in PHP ;) When you declare variable via "const", i.e. assign an object, it means that you cannot reassign to that variable another object (or any other value). But you can use and even modify the object you assigned when declare it. This is a new feature of ES6, check our screencast "const vs let" for more details: https://knpuniversity.com/s...

Cheers!

|

Thomas Talbot 8 years ago

Hi Ryan,

What about the option "--env.production" for example ? It seems to be easier than NODE_ENV.

|

weaverryan SFCASTS Thomas Talbot 8 years ago edited

Yo Thomas Talbot!

Great questions! And actually, I don't have a good answer for you! I've looked at the --env flag once before... and I thought I remembered there being some issue or shortcoming with it. But now, I can't find any issue with it: it seems like a perfectly fine way to pass this "flag" into your code! Of course, you need to return a callback now.. but that's not really an issue :).

Actually, I may have had a problem with it in the context of Webpack Encore: where we (in that library) need to know what environment you're in (with --env, the environment is passed to your webpack.config.js callback, but wouldn't be automatically accessible internally by Encore). That may have been why I completely neglected --env here.

Obviously, both work, but --env is obviously a bit more "official" :).

Cheers!

|

Thomas Talbot weaverryan 8 years ago

Thanks for your answer.

I think I'll keep the --env. :D

For Webpack Encore, I've tried it but there is lesser "granularity" IMHO.
We can't configure all that we want.... or it is not yet mature enough.

P.S. sorry, i'm pretty bad in english :(

|

weaverryan SFCASTS Thomas Talbot 8 years ago edited

Yo Thomas Talbot!

If you have some specific things that weren't flexible enough, we would love to hear from them. Please open an issue - real-world feedback is really helpful! https://github.com/symfony/... Mostly, my philosophy was to create a library that made 80% of the use-cases VERY easy out-of-the-box. Now, when people have real-world requirements that aren't possible (or at least aren't easy), we're adding more configuration methods. For example, this PR (which I'll probably merge today) https://github.com/symfony/... will add about 5 new methods to allow you to control the options of 5 plugins used internally.

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

Previous Chapter

Next Chapter