Webpack Encore: A Party for your Assets

Webpack... it's amazing! It will change the way you develop, giving you the power to write JavaScript modules, use front-end frameworks and optimize your assets!

But... Webpack is hard! Heck, we created a 3 hour tutorial all about it! That's why Webpack Encore: a library that drastically simplifies Webpack, so you can get back to developing. In this tutorial, we'll cover:

  • Installing and getting Encore rocking!
  • Downloading & using external libraries, like jQuery
  • Using multiple JavaScript entry points
  • Pre-processing through Sass
  • Bonus features: enabling React.js, Vue or PostCSS processing
  • Sourcemaps & versioning
  • Optimizing with a "shared" commons entry
  • Handling jQuery plugins
  • The import & export syntax
  • production builds
  • automatic asset versioning

This is going to be a blast: an awesome new asset setup, without the headache!


Your Guides

Ryan Weaver

Questions? Conversation?

  • 2018-04-13 Adrian Szuszkiewicz

    Ok, you're right, thanks Ryan! :)

  • 2018-04-12 weaverryan

    Hey Adrian Szuszkiewicz!

    Great question - I get this a lot actually. Basically.... it doesn't matter :). But, technically, everything should be done as a dev dependency. The reason is that you actually do NOT need the jquery module on your production server: you only need the jquery module to exist during your *build* process so that you can create the final .js and .css files that are needed on production. In fact, we don't need ANY of the Webpack, Encore or node stuff on production at all.

    But, like I said, it doesn't really matter. It would only matter in the following situation: you are actually building a Node web app that WILL be running on your production server in addition to using Webpack Encore. In that case, the modules needed for the web app should be required without --dev, but the Webpack Encore stuff *should* have --dev. That would allow you to include only the "Node web app" dependencies on production. Super weird edge-case... but there it is ;)

    Cheers!

  • 2018-04-12 Adrian Szuszkiewicz

    Hi guys - one question - why you require everything with --dev parameter? Isn't jquery module needed in production? I really don't get it :)

  • 2018-01-08 weaverryan

    We have an issue open on the official Encore repository about this problem in PhpStorm. It CAN be ignored, but you actually lose auto-completion for any aliases or resolve paths defined in your webpack config. If you care enough, the gist above is a bit ugly, but honestly, works great :).

  • 2018-01-08 weaverryan

    Hey here!

    > > Perhaps this just isn't documented well enough?
    > Definitely. There's just _nothing_ in the docs, about the possibility to being able to keep webpack configs at least semi-autonomous.

    I've got an issue open to fix this :).

    > > What tools do you mean that won't work?
    > Any tools, that are relaying on webpack resolvers to do their job. F.e. ESLint+vue-plugin wouldn't be able to process ".vue" files, it would stumble upon trying to resolve imports in that files. That's not to mention aliases, externals, etc. Same goes for some testing tools (had a hard time trying to configure Wallaby+jasmine). Also, PhpStorm becomes unavailable to resolve aliases in imports (which is a thing on itself), and thus type-completion/hinting becomes less-precise. Also, it becomes quite a riddle to try to configure ESLint's rule 'import/extensions'. etc. etc.

    Yes, now I'm more aware/understanding about the PhpStorm aliases issue. We have any issue open on this too - but, of course, this could be tricky to fix :/.

    About ESLint+vue-plugin, can you tell me more about this? Why does Encore make this a problem versus how Webpack works?

    > > You're referring to the bug about the PhpStorm auto-completion.
    No, that one is bearable, I was referring to webpack configs becoming unusable outside of Encore's bin in general. As far as I can tell, '.configureRuntimeEnvironment()' would be enough to fix that, thank you very much for the guidance!

    Awesome :).

    Cheers!

  • 2018-01-08 Oliver Davies

    Looking forward to this! I've just found Webpack Encore and this weekend I've plugged it into my Sculpin site, a Symfony app for my local PHP user group, and a couple of Drupal sites. :)

  • 2018-01-05 Victor Bocharsky

    Hey Pilou,

    Wow, what a tricky workaround! Thank you for sharing it with others! :)

    Cheers!

  • 2018-01-05 Pilou

    Hi, here's how I did it to avoid PHPStorm error : https://gist.github.com/plf...

  • 2018-01-03 ankhzet

    Yay, thats really what I was searching for!

    > Perhaps this just isn't documented well enough?
    Definitely. There's just _nothing_ in the docs, about the possibility to being able to keep webpack configs at least semi-autonomous.

    > What tools do you mean that won't work?
    Any tools, that are relaying on webpack resolvers to do their job. F.e. ESLint+vue-plugin wouldn't be able to process ".vue" files, it would stumble upon trying to resolve imports in that files. That's not to mention aliases, externals, etc. Same goes for some testing tools (had a hard time trying to configure Wallaby+jasmine). Also, PhpStorm becomes unavailable to resolve aliases in imports (which is a thing on itself), and thus type-completion/hinting becomes less-precise. Also, it becomes quite a riddle to try to configure ESLint's rule 'import/extensions'. etc. etc.

    > You're referring to the bug about the PhpStorm auto-completion.
    No, that one is bearable, I was referring to webpack configs becoming unusable outside of Encore's bin in general. As far as I can tell, '.configureRuntimeEnvironment()' would be enough to fix that, thank you very much for the guidance!

  • 2018-01-03 weaverryan

    Hey there!

    Sorry for my slow reply - the holidays :)

    First, hmm, I suppose you could say that about Encore standing in the way of PhpStorm :). I disagree, but fair enough! Encore is a webpack config generator. So, if you decide to use Encore, then you're no longer writing webpack config directly anymore. This means that any tools that help with this config - e.g. PhpStorm - will not work. Btw, the reason we *require* the encore config is because we need to capture certain flags passed to encore so that we can adjust our generated config. And actually, you can work around this: https://github.com/symfony/.... Perhaps this just isn't documented well enough?

    > (Encore is ...) not so great for SPA projects and alike, or for projects that have extensive client-side part, 'cause it breaks integration with some must-have tools in frontend dev toolkit.

    But I *am* curious about this. What tools do you mean that won't work? Does the configureRuntimeEnvironment() method I listed above solve these issues?

    > Is it going to be fixed, somewhen, somehow?

    You're referring to the bug about the PhpStorm auto-completion. We have an issue on it: https://github.com/symfony/.... I hope we'll fix it soon - or someone in the community can :). I've had to focus on other parts of Symfony for the Symfony 4 release, but will come back to Encore for some great changes soon.

    Cheers!

  • 2017-12-28 Ankhzet

    weaverryan , "this is nothing to worry about"? "it's ok that PhpStorm doesn't help us"?
    But it's more like "Encore stands in the way of PhpStorm", not "PhpStorm doesn't help us".
    In current implementation, when you use Encore in webpack.config, you are _forced_ to use it _only_ via Encore bin. If you try to use such config in any way, except through Encore, it will just complain "Blah blah blah Are you trying to use index.js directly? Rly? Blah blah...", 'cause Encore's webpack config builder requires some webpack runtime configuration data, which is provided by Encore's bin script. Webpack's config files, in general, are supposed to be self-contained to be interusable with other tools (as their only purpose is to provide build config object, no side effects are expected). With Encore, it will be only usable by Encore itself.
    Thus, no Webpack integration with ESLint, no Webpack integration with PhpStorm, no Webpack integration with, well, anything. Except Encore, ofc. Not critical, sure, but being unable to use, f.e., Webpack's resolver config is a cons.

    Don't get me wrong, Encore is definitely a great tool, but mostly if your project is more backend'y, than frontend'y. Not so great for SPA projects and alike, or for projects that have extensive client-side part, 'cause it breaks integration with some must-have tools in frontend dev toolkit.

    Is it going to be fixed, somewhen, somehow?
    Thanx in advance.

  • 2017-12-27 kaizoku

    With SF4 released, we really need this !
    Can't wait.

  • 2017-12-20 niumis

    Okay, I now understand. Thanks, guys!

    Best Regards!

  • 2017-12-19 weaverryan

    Hey niumis!

    So, let me answer this in 2 parts :).

    1) "Can't analyse webpack.config.js": this is nothing to worry about. PhpStorm recently added webpack.config.js support. But since Encore takes care of all of the complex stuff for you, it's ok that PhpStorm doesn't help us.

    2) "Unresolved function or method": this is indeed a bug in Encore. It doesn't affect anything, but due to a change we made a few months ago, PhpStorm now has a hard time auto-completing methods. It's something we should be able to fix in Encore pretty soon.

    Cheers!

  • 2017-12-18 niumis

    Hey, Victor!

    Thank you for reply!

    I just load symfony-demo app into PhpStorm. Nothing change in project and PhpStorm preferences. PhpStorm says "Can't analyse webpack.config.js: ..." and "Unresolved function or method" in all functions in Encore block. Maybe need configure PhpStorm or something else?
    Sorry for my bad English...

    Cheers :)

    P.S. Chrome's Console it's ok, nothing errors found.

  • 2017-12-18 Victor Bocharsky

    Hey Niumis,

    Thanks for your feedback!

    What are you doing to get this error? Eventually, Encore.getWebpackConfig() should return a valid webpack config. Do you export the result like: module.exports = Encore.getWebpackConfig();? Do you have any JS errors in Chrome's Console when loading a page which use Webpack features?

    Cheers!

  • 2017-12-15 niumis

    Hi, weaverryan!
    Thanks for Your tutorials, they are great!

    PhpStorm can't recognise webpack.config.js:
    "Can't analyse webpack.config.js: coding assistance will ignore module resolution rules in this file. Possible reasons: this file is not a valid webpack configuration file or its format is not currently supported by the IDE".
    What am i doing wrong with PhpStorm settings?
    Thanks!

    Best Regards :)

  • 2017-12-14 weaverryan

    Brand new project :) And we *just* designed it: "Deep Space Junk". More soon....

  • 2017-12-14 Zorpen

    Thanks weaverryan
    Will Joyful Development with Symfony 4 be some kind of fork of AquaNote, or brand new project?
    Either way - can't wait!

  • 2017-12-14 weaverryan

    Hey Zorpen!

    Bah, not yet! With the Symfony 4 release, we need to get the first big Symfony tutorial out first. But this will be next! I'm hoping to release a lot of good stuff in a few weeks / January. Thanks for your patience!

    Cheers!

  • 2017-12-13 Zorpen

    weaverryan Are we there yet? ;)

  • 2017-10-11 Jeremy Jumeau

    :)

  • 2017-10-11 weaverryan

    Woohoo! Really glad to hear about your success already - that makes my day! More to come :)

  • 2017-10-10 Jeremy Jumeau

    Great! I started using Encore a couple of days ago, it's amazingly easy to setup, I'm excited to learn deeper from its creator! Thank you Ryan and good luck!