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

27.

Optimizing the "Commons" Chunk

|

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

6 Comments

Sort By

Login or Register to join the conversation

Agnes 7 years ago edited

Here is my config for Webpack 4.


  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        commons: {
          name: 'layout',
          enforce: true
        }
      }
    },
    // dumps the manifest into a separate file
    runtimeChunk: {
      name: "manifest",
    },
  },

This reduces the file sizes but the css can't be found when I go to the login page. And it does not find the css after logging in. Remove the optimization and everything returns to normal. What am I missing?

|

weaverryan SFCASTS Agnes 7 years ago edited

Hey Agnes!

Hmm. When you execute webpack, what CSS files does it create? Webpack will split both your Js files *and* your CSS files, which means you will need multiple script tags *and* multiple links tags. So, you may just be missing some link tags because of the CSS splitting.

Cheers!

|

Agnes weaverryan 7 years ago edited

Hey Ryan, you're right, it was not generating the css in build. I wound up adding a section to the group. Not sure if this is correct, by it works :)
`
optimization: {

splitChunks: {
  chunks: 'all',
  cacheGroups: {
    commons: {
      name: 'layout',
      test: 'layout',
      enforce: true
    },
    css: {
      name: 'css',
      test: '/\.css$/',
      enforce: true
    }
  }
},
// dumps the manifest into a separate file
runtimeChunk: {
  name: "manifest",
}

}
`

|

weaverryan SFCASTS Agnes 7 years ago edited

Hey Agnes!

If it works, that's something :). This stuff can be confusing. On Webpack Encore, we use a pretty simple configuration:


splitChunks: {
    chunks: 'all'
},
runtimeChunk: 'single'

We basically let Webpack to the splitting for us. We then need to handle figuring out which script/link tags to render (as things are split dynamically).

Cheers!

|

GDIBass 8 years ago edited

How would this be done on webpack 4?

Edit: I think I got it? Maybe?

Looks like (per comments in the previous step) this feature was moved out of plugins an into an optimization tag. To generate a manifest you have to add the runtimeChunk key with a name. Like this:


    optimization: {
        splitChunks: {
            name: 'layout',
            chunks: 'all',
            minChunks: 2,
        },
        runtimeChunk: {
            name: 'manifest'
        }
    },

|

weaverryan SFCASTS GDIBass 8 years ago edited

Hey GDIBass!

Hmm, yes, well, at least, *almost*. In updating Encore for Webpack 4, here is our code that does this: https://github.com/symfony/...

The key things are:

a) Create a cache group whose name is the same as your entry file that you want to be the "commons" entry
b) I needed enforce: true as an option and also test, set to the entry name.
c) And yes, good job with the runtimeChunk stuff - you got that right.

I need to get an update ready for this chapter anyways for Webpack 4. So if you have any other questions, let me know!

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