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

14.

Bootstrap CSS & Fonts

|

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

7 Comments

Sort By

Login or Register to join the conversation

Dragoslav-I 3 years ago

How can the user download the fonts and add them to the app and have them immediately available ?

|

MolloKhan SFCASTS Dragoslav-I 3 years ago

Hey Dragoslav,

I think you can just download them through their CDN, store them in your app and let Webpack to process and move the files into the public directory

Cheers!

1 |

Dragoslav-I MolloKhan 3 years ago

Do not work.

|

MolloKhan SFCASTS Dragoslav-I 3 years ago

Could you tell me what's not working? What did you try, and what error you got?

|

Dragoslav-I MolloKhan 3 years ago

I put this in webpack. But my app still do not see new fonts

`.addLoader( {

    test: /.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,

    use: [{
      loader: 'file-loader',
      options: {
        name: '[name].[ext]',
        outputPath: 'assets/fonts/',
        publicPath: '../fonts/'
      }
    }]
});`

|

GDIBass 8 years ago

had to drop the version of bootstrap to get this to work (now that bootstrap 4 is out).

yarn remove bootstrap
yarn add bootstrap@3.3.7 --dev

|

MolloKhan SFCASTS GDIBass 8 years ago edited

Hey GDIBass

Yep, sorry about that, this tutorial was recorded before Bootstrap v4 was released, we added a note in the script to inform our users about it, but you may not noticed it :)

Have a nice day.

|

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