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

03.

webpack.config.js

|

Autoplay

Previous Chapter

Next Chapter

Login or Register to check out the script

4 Comments

Sort By

Login or Register to join the conversation

Lijana Z. 7 years ago

it looks like other IDEs should have hard time to compete with PHPstorm when tutorials only show how to work with PHPStorm :) But PHPStorm is really good. Just that I still hope there will be competition, because monopoly is bad for customers :)

|

weaverryan SFCASTS Lijana Z. 7 years ago edited

Hey Lijana Z.!

Yea, it's true! PhpStorm is WAY out in front, in my opinion. But, I would also be ok with competition - if someone can make something as good as PhpStorm, that would be an incredible accomplishment :).

Cheers!

|

J.R. Jenkins 8 years ago

if we are using path.resolve() to make the webpack.config.js file platform independent, should we use that when building the entry configuration as well? I don't see that in the example on webpack.js.org, but it seems like we would have to worry about path issues on input as much as output.

|

weaverryan SFCASTS J.R. Jenkins 8 years ago edited

Hey J.R. Jenkins!

Ah, very good! I believe the answer is yes: unlike PHP, in Node, the / versus \ DOES make a difference (whereas in PHP you can use / and it'll work on Windows for file paths). So yes, I expect that the / will cause problems on Windows. But, you need to ask whether or not you need the portability. The *real* reason I showed path.resolve() was to talk about path() and requiring core modules. Honestly, I'm not sure why they show path.resolve in some places, but not others - this may help solve some edge-case issue, but I'm not aware of anything.

Anyways, not a completely concrete answer, but hopefully it helps :).

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