Chapters

21 Chapters | 2:10:39 |

01

Hello Webpack Encore

6:40
02

Webpacking our First Assets

5:27
03

Twig Helpers, entrypoints.json & yarn Scripts

4:04
04

Modules: require() & import()

4:57
05

Importing External Libraries & Global Variables

6:38
06

Bootstrap & the Curious Case of jQuery Plugins

6:05
07

The Magic of Split Chunks

6:06
08

Importing 3rd Party CSS + Image Paths

8:54
09

Sass & Overriding Bootstrap Variables

8:10
10

Copying Files

8:11
11

Page-Specific JS: Multiple Entries

7:36
12

Entry Refactoring

7:04
13

Refactoring Autocomplete JS & CSS

5:21
14

Auto-Provide jQuery for Mischievous Packages

6:37
15

addStyleEntry(): CSS-Only Entrypoint

3:51
16

Support any Browser with PostCSS & Babel

6:00
17

browserslist: What Browsers do you need to Support?

6:04
18

Polyfills & Babel

4:35
19

The Single Runtime Chunk

6:31
20

Async Imports

5:42
21

Production Build & Deployment

6:03

> JavaScript Frameworks & Tools > Webpack Encore: Frontend like a Pro!

18.

Polyfills & Babel

|

Autoplay

Previous Chapter

Next Chapter

Login or Register to check out the script

14 Comments

Sort By

Login or Register to join the conversation

Krzysztof K. 7 years ago

Hello Ryan, could you tell something more about Babel? Does it transpile/poly-fill code from node_modules too? I had issue with one dependency from node_modules under IE11, and to resolve it I copied it to asset/vendor folder ad now it works.

Before this tutorial I had different babel configuration through encore, not sure what are the differences, but I had poly-fills included in my main.js, but I have changed it now to your setup and all works :)

What about: "@babel/plugin-transform-runtime", is this plugin required for anything?

1 |

weaverryan SFCASTS Krzysztof K. 7 years ago edited

Hey Krzysztof K.!

Does it transpile/poly-fill code from node_modules too?

Excellent question! By default, no, it does not. Actually, it's a setting of Babel and Encore pre-configures it to not process things in node_modules/ - here is some info about that - https://github.com/symfony/webpack-encore/issues/558. We do this for performance - Babel slows things down and usually you don't need Babel to be executed on node_modules stuff (that's not always true, but running it all the time when you usually don't need it would be a huge pain). You had an interesting situation where you had a 3rd party module that didn't support IE11. In a sense, you were "fixing" their code. Ideally, 3rd party libraries would support all "reasonable" version of browsers.

What about: "@babel/plugin-transform-runtime", is this plugin required for anything?

To be honest with you, I'm not sure. You could try adding this and see if it has any affect. I'm not familiar with this plugin... it might save on some filesize - but I really don't know. Sorry I can't give you a better answer on that one!

Cheers!

2 |

Krzysztof K. weaverryan 7 years ago

SOLVED: seems that includeNodeModules does the job!

Hi Ryan, is it possible that you could add option to encore configuration to specify which libraries form node_modules should be transpiled?

Vue cli seems to have such option: transpileDependencies

Can we have something similar for webpack encore?

At the moment each time I have such issue (related to IE11), I just copy the library to my private vendor folder, but this is poor solution.

|

weaverryan SFCASTS Krzysztof K. 7 years ago edited

Good find Krzysztof K.! It's a pretty new feature - happy it's working for you!

|

Dirk 6 years ago edited

I tried including a custom build of CKEditor5 in my Webpack Encore config, which not too easy. I made it work, but I have one question left. In my assets directory, I created a directory 'ckeditor5', which contains all the code for my custom build. Babel should not transpile this code because, well.. the editor does not work with older versions of JS (even when transpiled). So I wanted to exclude this directory and everything in it from Babel. I tried

`
.configureBabel(() => {}, {

  exclude: /assets\/ckeditor5/

)}
`

That did not work. What does work is:

`
.configureBabel(() => {}, {

  exclude: {
       exclude: /assets\/ckeditor5/
  }

)}
`

But why? (ps. sorry for the layout of the code. Even though I tried to edit it to make it look normal, it does not seem to work).

|

weaverryan SFCASTS Dirk 6 years ago edited

Hey Dirk!

Sorry for my slow reply!

Wow... that is WEIRD! I can't explain this fully. But, I can give you some info that might help. There are (and this confused me, I had to triple-check some logic) two different "exclude" things going on. First, the "exclude" option here is meant to tell Webpack to *not* process matching paths through "babel-loader". That appears to be working correctly (from double-checking and dumping some files in Encore). I can't explain why the first would be not working and the second *would* be working. Also, Babel itself has an "exclude" option - that is something totally different - just mentioning to avoid confusion.

Btw, the "exclude" option defaults to ignoring node_modules. When you override it, you replace that default. But, that should be happening on both "variations" of what you're doing - so I don't think it's really related.

Sorry I can't give you a more clear answer on this one - it's a bit of a mystery!

|

Dirk weaverryan 6 years ago

Hey Ryan,

No need to apologize for taking some time to reply! I can only imagine how busy you are. Maybe this comment helps (scroll down to the second sections, you've seen it before ;)). It was the reason why I even tried such a strange thing.

Cheers, Dirk

1 |

weaverryan SFCASTS Dirk 6 years ago

Ohhhhhhhhhhhh. THANK YOU. Of COURSE. Ultimately, the "exclude" is passed to an "exclude" on the "loader". That *usually* is a regexp (e.g. /node_modules) but you can *also* set it to an "object" where (by coincidence) "exclude" is an option: :p. I'm still not sure why you weren't able to pass it to the top-level exclude... but I at least know why that was parsing correctly.

Cheers!

|

Dirk weaverryan 6 years ago edited

ha, it's good to have an explanation ;). I have come up with a better solution using regex:
exclude: /node_modules(?!(\\)@ckeditor)/
Not only is this easier to read, it also targets only the files that are part of @ckeditor, and not all files that are being referenced to in /assets/ckeditor5.
ps. There might be better ways to write the regex, I'm not that great with it.

|

weaverryan SFCASTS Dirk 6 years ago

Nice one! My favorite regex is the kind... that works... and ideally one I have a test for - because it's not easy for me either ;)

Cheers!

|

Paul Z. 6 years ago

Hi Ryan,

We need to support IE11 and higher, so in my package.json I added:

```
"browserslist": [
"ie >= 11"
]
```
However, I run `yarn dev` I get a javascript error about `Object.assign not found`. But if I run `yarn build` for a production build everything works in IE11. I have tried deleting the node_modules cache like it instructed in this video. Why does the transpiling for IE11 not work for a dev build? Also if I run `yarn build` without the browserslist it works in IE11. So it seems like it only transpiles down in general if I run a production build, I was assume it would transpile for dev build as well?

|

weaverryan SFCASTS Paul Z. 6 years ago edited

Hey Paul Z. !

So it seems like it only transpiles down in general if I run a production build, I was assume it would transpile for dev build as well?

Hmm... yea... it should transpile down in all cases. Well, specifically here, it's all about the "polyfill"... which is also done by Babel... but they're two (sort of) separate things (rewriting syntax == transpiling vs adding features == polyfill). Either way, I can't see anything that would cause this behavior... so we'll need to do a bit of digging to figure it out... if you're up for it ;).

First, you can see where the "Encore.isProduction()" value is used internally in Encore - it's just a few places: https://github.com/symfony/webpack-encore/search?q=isProduction&unscoped_q=isProduction

The easiest way to debug this would be to manually go into node_modules/@symfony/webpack-encore and "tweak" these settings ones-by-one and see if there is a difference. I'm particularly interested in tweaking lib/loaders/babel.js - https://github.com/symfony/webpack-encore/blob/5414a1dd9215e5baf005396bae9135a91187a278/lib/loaders/babel.js#L29 - I would change that line to "false" (the value for the production build) and see if it changes the behavior of the dev build. I'm also interested in the "mode" key - https://github.com/symfony/webpack-encore/blob/fe404d61b77628910b0f9a4762ce0e599a9b84ac/lib/config-generator.js#L66 - hardcoding that to "production". Basically, we want to see what is triggering the behavior change... which is super weird.

If you don't care so much... and don't want to debug - I understand! But if you are curious... then I think with a bit of digging, we can find the root cause.

Cheers!

|

Paul Z. weaverryan 6 years ago

Hi Ryan,

Thanks for getting back to me. Changing the mode to 'production' in https://github.com/symfony/...

fixed it, but that still doesn't really tell me much unless you have an idea? I had turned the babel cache directory off earlier hoping that was the issue and that didn't work either.

|

weaverryan SFCASTS Paul Z. 6 years ago edited

Hey Paul Z.!

Hmm, I was afraid that one would be the problem :/. I say "afraid" because that's a Webpack setting that controls a variety of things - https://webpack.js.org/conf... - so it's tough to know which is causing the real issue :/. If you are willing to a bit more digging, I would:

A) Set the mode back to development... or basically.. undo any hacks you added for debugging
B) Go to the optimization config - https://github.com/symfony/... - and start changing some of the keys from their development-mode defaults https://webpack.js.org/conf... to their production mode values - https://webpack.js.org/conf... - optimization isn't the only spot where these two modes change config, but it is the most significant (note that each mode also enables different plugins, but this is actually caused by the optimization flags usually - e.g. if you change minimize to true, it *causes* the TerserPlugin to be added).

The fact that the development mode is the problem and production works is really odd - I would (if anything) expect the opposite, as code is minified in production... so in theory you could "lose more". That's why I'm a bit perplexed as to which of these configs could be causing the issue... :/

Let me know what you find out!

Cheers!

|

This tutorial works great with Symfony5!

Symfony 4 Webpack Encore

What PHP libraries does this tutorial use?

// composer.json
{
    "require": {
        "php": "^7.1.3",
        "ext-iconv": "*",
        "aws/aws-sdk-php": "^3.87", // 3.91.4
        "composer/package-versions-deprecated": "^1.11", // 1.11.99
        "doctrine/annotations": "^1.0", // 1.10.1
        "doctrine/doctrine-bundle": "^1.6.10", // 1.10.2
        "doctrine/doctrine-migrations-bundle": "^1.3|^2.0", // v2.0.0
        "doctrine/orm": "^2.5.11", // v2.7.2
        "knplabs/knp-markdown-bundle": "^1.7", // 1.7.1
        "knplabs/knp-paginator-bundle": "^2.7", // v2.8.0
        "knplabs/knp-time-bundle": "^1.8", // 1.9.0
        "league/flysystem-aws-s3-v3": "^1.0", // 1.0.22
        "league/flysystem-cached-adapter": "^1.0", // 1.0.9
        "liip/imagine-bundle": "^2.1", // 2.1.0
        "nexylan/slack-bundle": "^2.0,<2.2.0", // v2.1.0
        "oneup/flysystem-bundle": "^3.0", // 3.0.3
        "php-http/guzzle6-adapter": "^1.1", // v1.1.1
        "phpdocumentor/reflection-docblock": "^3.0|^4.0", // 4.3.0
        "sensio/framework-extra-bundle": "^5.1", // v5.3.1
        "stof/doctrine-extensions-bundle": "^1.3", // v1.3.0
        "symfony/asset": "^4.0", // v4.2.5
        "symfony/console": "^4.0", // v4.2.5
        "symfony/flex": "^1.9", // v1.21.6
        "symfony/form": "^4.0", // v4.2.5
        "symfony/framework-bundle": "^4.0", // v4.2.5
        "symfony/property-access": "4.2.*", // v4.2.5
        "symfony/property-info": "4.2.*", // v4.2.5
        "symfony/security-bundle": "^4.0", // v4.2.5
        "symfony/serializer": "4.2.*", // v4.2.5
        "symfony/twig-bundle": "^4.0", // v4.2.5
        "symfony/validator": "^4.0", // v4.2.5
        "symfony/web-server-bundle": "^4.0", // v4.2.5
        "symfony/webpack-encore-bundle": "^1.4", // v1.5.0
        "symfony/yaml": "^4.0", // v4.2.5
        "twig/extensions": "^1.5" // v1.5.4
    },
    "require-dev": {
        "doctrine/doctrine-fixtures-bundle": "^3.0", // 3.1.0
        "easycorp/easy-log-handler": "^1.0.2", // v1.0.7
        "fzaninotto/faker": "^1.7", // v1.8.0
        "symfony/debug-bundle": "^3.3|^4.0", // v4.2.5
        "symfony/dotenv": "^4.0", // v4.2.5
        "symfony/maker-bundle": "^1.0", // v1.11.5
        "symfony/monolog-bundle": "^3.0", // v3.3.1
        "symfony/phpunit-bridge": "^3.3|^4.0", // v4.2.5
        "symfony/stopwatch": "4.2.*", // v4.2.5
        "symfony/var-dumper": "^3.3|^4.0", // v4.2.5
        "symfony/web-profiler-bundle": "4.2.*" // v4.2.5
    }
}

What JavaScript libraries does this tutorial use?

// package.json
{
    "devDependencies": {
        "@symfony/webpack-encore": "^0.27.0", // 0.27.0
        "autocomplete.js": "^0.36.0",
        "autoprefixer": "^9.5.1", // 9.5.1
        "bootstrap": "^4.3.1", // 4.3.1
        "core-js": "^3.0.0", // 3.0.1
        "dropzone": "^5.5.1", // 5.5.1
        "font-awesome": "^4.7.0", // 4.7.0
        "jquery": "^3.4.0", // 3.4.0
        "popper.js": "^1.15.0",
        "postcss-loader": "^3.0.0", // 3.0.0
        "sass": "^1.29.0", // 1.29.0
        "sass-loader": "^7.0.1", // 7.3.1
        "sortablejs": "^1.8.4", // 1.8.4
        "webpack-notifier": "^1.6.0" // 1.7.0
    }
}

Previous Chapter

Next Chapter