Webpack Encore: Frontend like a Pro!

2:10:39

What you'll be learning

Writing great PHP code but your JavaScript looks a little bit hacky? It's not your fault! Before Webpack, coding "correctly" in JavaScript... sorta wasn't possible!

But setting up Webpack can be a pain. So... hello Webpack Encore! Encore allows you to modern JavaScript starting... immediately! Go, go go!

  • Installing Encore & yarn
  • webpack.config.js & your first Webpack build!
  • Adding script & link tags thanks to WebpackEncoreBundle: encore_entry_script_tags() & encore_entry_link_tags()
  • Modules! require, import and export
  • Installing & using external libraries
  • jQuery plugins & global variables
  • Handling CSS! Including fonts & images
  • Code splitting: free, smart optimization
  • Sass & Overriding Bootstrap Sass Variables
  • Copying static files
  • Multiple "entries": page-specific CSS & JavaScript
  • PostCSS, Bower, browserslist, polyfills & new features in old browsers
  • enableSingleRuntimeChunk()?
  • Async imports!

Your Guides
Ryan Weaver


Questions? Conversation?

  • 2020-01-13 Victor Bocharsky

    Hey Dave,

    Hm, I see... For me it sounds like "eslint-loader & babel-eslint" are optional dependencies, they are required only when you use configureLoaderRule(). This way Encore does not want to force everyone pulling those packages as some customers might just not needed them. So maybe it's only listed in dev deps in package.json for clarity, or maybe it's used in some tests also.

    Anyway, good idea to open an issue I think. Probably someone will be able to explain how it works with babel-eslint behind the scene better than I did.

    Cheers!

  • 2020-01-11 Dave Wilson

    Hi Victor,


    /var/www/api-platform # yarn why babel-eslint
    yarn why v1.16.0
    [1/4] Why do we have the module "babel-eslint"...?
    [2/4] Initialising dependency graph...
    [3/4] Finding dependency...
    [4/4] Calculating file sizes...
    => Found "[email protected]"
    info Has been hoisted to "babel-eslint"
    info This module exists because it's specified in "devDependencies".
    info Disk size without dependencies: "2.4MB"
    info Disk size with unique dependencies: "6.18MB"
    info Disk size with transitive dependencies: "13.52MB"
    info Number of shared dependencies: 27
    Done in 0.79s.

    so it's only a dependency because I added it. If I don't add it:

    Running webpack-dev-server ...

    WARNING Be careful when using Encore.configureLoaderRule(), this is a low-level method that can potentially break Encore and Webpack when not used carefully.
    Error: Install eslint-loader & babel-eslint to use enableEslintLoader()
    yarn add [email protected]^2.1.2 [email protected]^10.0.1 --dev

    error Command failed with exit code 1.
    info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

    So it looks like it's a required dependency by webpack as it's the default parser even though it may not be used. I'll post the question on their github wiki. Thanks!

  • 2020-01-10 Victor Bocharsky

    Hey Dave,

    I don't know the exact reason but probably could give you some tips. First of all, JS dependencies are weird :) Really, when you run "yarn install" tons of tons JS packages are pulled locally. So, some dependencies still might require it. Also, you can give some hints from Yarn on it, try to execute "yarn why babel-eslint" to know why exactly it was installed. Does the output helps? Let me know if it's not. Btw, what exactly error message do you see when you don't have "babel-eslint" package installed?

    Btw, I also noticed "babel-eslint" as a dependency in package.json of Webpack Encore, see https://github.com/symfony/... . So, it looks like a required dev dependency of Webpack Encore

    Also, probably this issue could answers some questions for you? https://github.com/symfony/... . Otherwise, probably better to ask this question on webpack encore repo, probably someone there could answer this question better than me.

    I hope this helps!

    P.S. Thank you for your kind feedback about our courses! And congrats on your first headless app, well done!

    Cheers!

  • 2020-01-09 Dave Wilson

    I wasn't sure where to ask this question, I didn't want to add it as a encore github issue because it's probably not an issue but just me.

    What i'm trying to use is encore, typescript, react, and linting typescript with using the '@typescript-eslint/parser' parser (since tslint is being deprecated). I got it all working, but my question is why do I still need the 'babel-eslint' package if i'm not using the babel eslint parser? Encore complains that I need it if I enable 'enableEslintLoader'. Here is the relevant parts of my webpack.config.js:


    .enableTypeScriptLoader()
    .enableForkedTypeScriptTypesChecking()
    .enableEslintLoader(options => {
    options.parser = '@typescript-eslint/parser'
    })
    .configureLoaderRule('eslint', loader => {
    loader.test = /\.(jsx?|tsx?)$/
    })
    .enableReactPreset()

    Here is the relevant parts of my .eslintrc.js file:


    parser: "@typescript-eslint/parser",
    plugins: [
    "@typescript-eslint",
    "react"
    ],
    extends: [
    "eslint:recommended",
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:react/recommended"
    ],
    parserOptions: {
    ecmaVersion: 2018,
    sourceType: 'module',
    ecmaFeatures: {
    jsx: true
    }
    }

    Oh also the 'fork-ts-checker-webpack-plugin' now supports eslint, however when I enable it with:


    .enableForkedTypeScriptTypesChecking(tsConfig => {
    tsConfig.eslint = true;
    })

    it doesn't seem to do anything. So i'm just wondering what I'm missing, or what's the best way to config eslint & typescript parser. Thanks in adance, your videos for react and api-platform has given me a huge head start in building my first headless app!

  • 2019-12-23 Victor Bocharsky

    Hey Xidoc,

    Could you explain more what exactly problem do you have? Any error messages that would help to figure out your problem? What exactly you want to configure? Did you follow any installation guide or docs? We would be glad to help you knowing a little more about your problem

    Cheers!

  • 2019-12-22 xidoc

    How can I configure Foundation ?
    I don't understand where is the problem ?

  • 2019-10-01 weaverryan

    Hey Shamshid!

    That's an excellent suggestion - I haven't played much with purge, but I've heard of it. I think getting it to work nicely requires (as you guessed) a bit of work... and I'm not sure it's worth it. I know Javier played with it for a bit, but ultimately decided not to use it. Here are some resources: https://github.com/symfony/... and https://github.com/symfony/...

    Cheers!

  • 2019-09-29 Shamshid

    great tutorial.

    You should bring usage of purgecss in Encore which will trim out unwanted css and most importantly we need to learn to make a config to which trims page specific css from dedicated css file. (kinda confusing what I told here)

  • 2019-06-03 weaverryan

    "pack" of knowledge 😂- yep, we're friends :D

  • 2019-06-01 Hessuss Hesiu Kowalski

    Hi Ryan, thanks for another amazing and hyuooOOOooough! huge pack of knowledge.

  • 2019-04-16 Alex Zerah

    Thanks for your answer Diego Aguiar
    I am waiting the course,

    Cheers!

  • 2019-04-15 Diego Aguiar

    Hey Alex Zerah

    First to clarify, this course is not about Jquery, but it's a very accepted library for the community, and there are many tricks you need to know about how to properly integrate it with Encore (and this is even more needed when working with Jquery plugins that are poorly written)

    Cheers!

  • 2019-04-15 Alex Zerah

    This seems very great!

    Something is bothering me.
    Why are you using jQuery? I am not saying it's not a good tool. If well configured the library can be awesome. But vanilla JS is powerful enough today to be used alone.