SymfonyCasts stands united with the people of Ukraine
gstreamer0.10-ffmpeg
gstreamer0.10-plugins-good packages.
Create a new file: webpack.config.js. Here's how Webpack works: we create a config file that tells it which file to load, where to save the final file, and a few other things. Then... it does the rest!
But... Webpack's configuration is complex. A fully-featured setup will probably be a few hundred lines of complicate config! Heck, our Webpack tutorial was over 3 hours long! Very simply: Encore is a tool that helps generate that complex config.
Click on the documentation to find the "First Example". Hey! A webpack.config.js file to get us started! Copy that! Then, paste it in our file. But, I'm going to simplify and delete a few things: we'll add this stuff back later. Just keep setOutputPath(), setPublicPath() and addEntry():
| var Encore = require('@symfony/webpack-encore'); | |
| Encore | |
| // the project directory where all compiled assets will be stored | |
| .setOutputPath('public/build/') | |
| // the public path used by the web server to access the previous directory | |
| .setPublicPath('/build') | |
| .addEntry('rep_log', './public/assets/js/RepLogApp.js') | |
| ; | |
| // export the final configuration | |
| module.exports = Encore.getWebpackConfig(); |
And hey, check out that first line! Since this file will be executed by Node, we can require stuff! This imports the Encore object:
| var Encore = require('@symfony/webpack-encore'); | |
| ... lines 2 - 15 |
Then, at the bottom, we ask Encore to give us the final config, and we export it:
| ... lines 1 - 12 | |
| // export the final configuration | |
| module.exports = Encore.getWebpackConfig(); |
There are only three things we need to tell Webpack: the directory where we want to save the final files - public/build - the public path to that directory - so /build since public/ is the document root - and an "entry":
| ... lines 1 - 2 | |
| Encore | |
| // the project directory where all compiled assets will be stored | |
| .setOutputPath('public/build/') | |
| // the public path used by the web server to access the previous directory | |
| .setPublicPath('/build') | |
| .addEntry('rep_log', './public/assets/js/RepLogApp.js') | |
| ; | |
| ... lines 12 - 15 |
Point this to our JavaScript file: ./public/assets/js/RepLogApp.js. Change the first argument to rep_log:
| ... lines 1 - 2 | |
| Encore | |
| ... lines 4 - 9 | |
| .addEntry('rep_log', './public/assets/js/RepLogApp.js') | |
| ; | |
| ... lines 12 - 15 |
This tells Webpack to work its magic on RepLogApp.js. The first argument will be the name of the final file, .js - so rep_log.js.
And... that's it! Find your terminal. Encore has its own executable. To use it, run:
Tip
Wait! Before running encore, first delete the .babelrc file (if you have one). This
is left-over from the previous tutorial and is not needed: Encore handles it for us.
./node_modules/.bin/encore dev
The "dev" part tells Encore to create a "development" build. And... cool! Two files written to public/build. Let's check them out! Alright! There's rep_log.js. We'll talk about manifest.json later.
Cool! Let's point our script tag at the new file. Open templates/lift/index.html.twig. This is the template that runs our main page. At the bottom, change the path to build/rep_log.js:
| {% extends 'base.html.twig' %} | |
| ... lines 2 - 53 | |
| {% block javascripts %} | |
| ... lines 55 - 57 | |
| <script src="{{ asset('build/rep_log.js') }}"></script> | |
| ... lines 59 - 65 | |
| {% endblock %} |
If you're not a Symfony user, don't worry, the asset() function isn't doing anything special. Ok, let's try it! Find your browser and, refresh! Woo! It works! People, this is amazing! We can finally organize JavaScript into multiple files and not worry about "forgetting" to add all the script tags we need. The require function is a game-changer!
If you look at the compiled rep_log.js file, you can see a bunch of Webpack code at the top, which helps things work internally - and... below, our code! It's not minimized because this is a development build. We'll talk about production builds later.
If you're using PhpStorm like me, there are a few things we can do to make our life much more awesome. Open Preferences and search for ECMAScript. Under "Languages & Frameworks" -> "JavaScript", make sure that ECMAScript 6 is selected.
Then, search for "Node" and find the "Node.js and NPM" section. Click to "Enable" the Node.js Core library.
And finally, if you're using Symfony, search for Symfony. If you don't see a Symfony section, you should totally download the Symfony plugin - we have some details about this in a different screencast. Make sure it's enabled, and - most importantly - change the web directory to public. This will give auto-completion on the asset function.
Back to Encore! There's one big bummer when introducing a "build" system for JavaScript like we just did: each time you change a file, you will need to re-run Encore! Lame! That's why Encore has a fancy "watch" option. Run:
./node_modules/.bin/encore dev --watch
This will build, but now it's watching for changes! Let's just add a space here and save. Yes! Encore already re-built the files. Stop this whenever you want with Ctrl+C.
Oh, and since this command is long, there's a shortcut:
yarn run encore dev
or, better... use the --watch flag:
yarn run encore dev --watch
Great! But... sometimes... we're going to make mistakes. Yes, I know, it's hard to imagine. Let's make a syntax error. Back at the terminal, woh! The build failed! But if you weren't watching the terminal closely, you might not realize this happened!
No problem! Let's enable a build notification system! In webpack.config.js, just add enableBuildNotifications():
| ... lines 1 - 2 | |
| Encore | |
| ... lines 4 - 11 | |
| .enableBuildNotifications() | |
| ; | |
| ... lines 14 - 17 |
The "watch" functionality has one weakness: whenever you update webpack.config.js, you'll need to restart Encore before it sees those changes. So... stop it and run Encore again:
yarn run encore dev --watch
Bah, error! Scroll up! Check this out, it says:
Install
webpack-notifierto useenableBuildNotifications()
And then it tells us to run a command. Cool! Encore has a ton of features... but to stay light, it doesn't ship with the all of the dependencies for these optional features. But, it's no problem: if you need to install something, Encore will tell you. Copy that command and run:
yarn add webpack-notifier --dev
Run encore again:
yarn run encore dev --watch
It works! And cool! A desktop notification. Now, make a mistake! Yes! An obvious build error. Fix it and... build successful!
Ok, we've got a pretty sweet system already. But Webpack is going to let us do so much more.
Hey Vince,
Thanks for sharing it with others! That's probably because Windows has permissions problem. I think you can try to add "node" in front of "./node_modules/.bin/encore", i.e.:
node ./node_modules/.bin/encore dev
In order to execute this file though Node. This way it should work. But I'd recommend to use "yarn run encore dev" which is a nice shortcut.
Cheers!
IMHO I would just use 'Git Bash' instead of 'Command Prompt' - it saves you from headaches of inconsistency issues and feels very close of using a native bash. (for those of us stuck with windows ;))
Hey Xi,
Yeah, "Git Bash" is very cool - it has most unix commands out of the box! I used to like it a lot when using Windows :)
Cheers!
Hello , does not work form me
when i compile with : ./node_modules/.bin/encore dev
throw new Error(`Encore.${prop}() cannot be called yet because the runtime environment doesn't appear to be configured. Make sure you're using the encore executable or call Encore.configureRuntimeEnvironment()
Any ideas
Thx
ok !
add
.configureRuntimeEnvironment('dev-server') in the webpack.config.js
it's work like a charm :)
Hey megdev
I believe you only have to run it like this ./node_modules/.bin/encore dev-server (dev-server)
instead of specifying in the code on which environment you want it to run
Cheers!
"Stop this whenever you want with Ctrl+C"
Its not works on Windows if you use git-bash:
The Ctrl+c combination will show somthing that the process was exited, BUT NOT!
Not the whole process tree killed and some things just running hidden in the background.
so, if you get a lot of weird errors, like:
yarn error "ENOTEMPTY: directory not empty, rmdir" or "“EACCESS: permission denied, scandir" and/or you can't delete the
build directory and contents because of a weird non-existed app.js/main.js or css .files...
Switch from git-bash to another terminal (like cmder).
Another solution (not tested): reinstall the git-bash with "Run Git from the Windows Command Prompt" option.
(I hope it saves a lot of debugging..)
Hi weaverryan ! I am trying to run the last version of Webpack (0.240) and I can't do it. When I run the command "yarn encore dev" I've got an error:
Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.- configuration.context: The provided value "/Volumes/Data/_Servers/!Examples/symfony-vue-tutorial" contains exclamation mark (!) which is not allowed because it's reserved for loader syntax.<br />-> The base directory (absolute path!) for resolving the entry option. If output.pathinfo` is set, the included pathinfo is shortened to this directory.
My Webpack.config.js is
`var Encore = require('@symfony/webpack-encore');
Encore
.setOutputPath('public/build/')
.setPublicPath('/build')
.cleanupOutputBeforeBuild()
.autoProvidejQuery()
.enableVersioning()
.addEntry('js/app', './assets/js/app.js')
.enableSingleRuntimeChunk()
;
module.exports = Encore.getWebpackConfig();`
Could you suggest smth how to fix it?
@weaverryan, never mind. It was my fault. I have an "!" symbol in my path, so it was an error. So I changed it to /Volumes/Data/_Servers/Examples/symfony-vue-tutorial and it runs.
I'm doing what you said. But, i`ve this erorr:
jquery-3.1.1.min.js:2 Uncaught ReferenceError: RepLogApp is not defined
at HTMLDocument.<anonymous> (lift:226)
at j (jquery-3.1.1.min.js:2)
at k (jquery-3.1.1.min.js:2)
Hey Alexandr,
Could you give us a bit more context? What exactly are you doing when see this error? We would be happy to help you.
Cheers!
Hi Victor! I found a solution for this error. If wasn`t use .enableSingleRuntimeChunk() or .disableSingleRuntimeChunk() in webpack.config.js, we was received messages
DEPRECATION Either the Encore.enableSingleRuntimeChunk() or Encore.disableSingleRuntimeChunk() method should be called.
DEPRECATION The recommended setting is Encore.enableSingleRuntimeChunk().
DEPRECATION After calling Encore.enableSingleRuntimeChunk(), a new "runtime.js" will be output and should be included on your page before any other script tags for Encore files.
.
but, if setting .enableSingleRuntimeChunk(),I had a mistake that I mentioned before.
but if I setting .disableSingleRuntimeChunk(), and PERFECT! not any mistakes
Hey Jose,
Oh, I see! Thank you for this report! We'll fix it and re-upload the video soon.
Cheers!
I followed the instructions from the first video to this one as close as possible (I'm not sure if I accidentally missed something), but I ended up with the following error after attempting to run ./node_modules/.bin/encore dev
/home/user/git/Webpack Encore A Party for your Assets/node_modules/@babel/core/lib/config/files/plugins.js:152
throw e;
^
Error: Cannot find module 'babel-preset-env' from '/home/user/git/Webpack Encore A Party for your Assets'
- Did you mean "@babel/env"?
at Function.module.exports [as sync] (/home/user/git/Webpack Encore A Party for your Assets/node_modules/resolve/lib/sync.js:43:15)
I ran the command: yarn add babel-preset-env --dev
Thinking that might help but it made another error trying to run the encore command again:
$ ./node_modules/.bin/encore dev
Running webpack ...
DEPRECATION Either the Encore.enableSingleRuntimeChunk() or Encore.disableSingleRuntimeChunk() method should be called.
DEPRECATION The recommended setting is Encore.enableSingleRuntimeChunk().
DEPRECATION After calling Encore.enableSingleRuntimeChunk(), a new "runtime.js" will be output and should be included on your page before any other script tags for Encore files.
ERROR Failed to compile with 1 errors 2:26:18 PM
error in ./public/assets/js/RepLogApp.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
TypeError: Cannot read property 'bindings' of null
I'm stuck at the current moment, I'll go back and try the tutorial again and see if I missed something.
Hey Martin B. !
Ah, sorry about the issues! Encore got a brand new release only 5 days ago, so there are a few changes. We're working on adding some notes now to point those differences out in the tutorial :). However, I don't think you should have such a catastrophic failure this early!
First, yes, delete that .babelrc file Martin B. is 100% correct. We actually delete that in a little while in this tutorial - but until the recent upgrade, it didn't cause any issues.
Second, you can ignore the deprecation warnings from Encore. Those are referring to some new features we added in the latest version. It's cool stuff - but not important for following along with this tutorial successfully.
If you have any other questions, please let us know! We want Encore to be a smooth process - which is why we're adding some notes right now!
Cheers!
Hi, when i run "node ./node_modules/.bin/encore dev" i've got this error:
C:\..........\node_modules\.bin\encore:2
basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
^^^^^^^
SyntaxError: missing ) after argument list
at createScript (vm.js:80:10)
at Object.runInThisContext (vm.js:139:10)
at Module._compile (module.js:616:28)
at Object.Module._extensions..js (module.js:663:10)
at Module.load (module.js:565:32)
at tryModuleLoad (module.js:505:12)
at Function.Module._load (module.js:497:3)
at Function.Module.runMain (module.js:693:10)
at startup (bootstrap_node.js:188:16)
at bootstrap_node.js:609:3
Can you help me?
Hey Andrea
Have you tried running it without the word "node"? i.e `./node_modules/.bin/encore dev`
Cheers!
Ok, I have one last idea. Try using back slashes ".\node_modules\.bin\encore dev"
If that doesn't work either, I'll ping Ryan to give it a check (it may take some time)
Yes, finally!
It must to be something about paths, but I'm not 100% sure. Anyways I'm glad that you could fix your problem :)
Cheers!
When I try to run ./node_modules/.bin/encore dev I get the following error:
Error: Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead
Hey Shaun,
What Webpack version installed do you have? It may be related to the new Webpack 4, probably downgrade it to v3 wil lfix this issue. If not, can you give us a bit more context about what file threw this error, it would be good to see stack traces below the error
Cheers!
Hey Shaun!
Victor is right... though it’s a bit mysterious, because Encore should kick your Webpack at v3. Could you post your package.json and webpack.config.js file?
Cheers!
Sure, here you go!
// package.json
{
"devDependencies": {
"@symfony/webpack-encore": "^0.19.0",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"node-sass": "^4.8.3",
"sass-loader": "^6.0.7",
"webpack": "^4.5.0",
"webpack-cli": "^2.0.13",
"webpack-notifier": "^1.6.0"
},
"license": "UNLICENSED",
"private": true,
"scripts": {
"dev-server": "encore dev-server",
"dev": "encore dev",
"watch": "encore dev --watch",
"build": "encore production"
},
"dependencies": {
"babel-core": "6",
"babel-loader": "^7.1.4",
"bootstrap": "4.1.3",
"jquery": "3.3.1",
"popper.js": "1.14.3"
}
}
// webpack.config.js
var Encore = require('@symfony/webpack-encore');
Encore
// the project directory where compiled assets will be stored
.setOutputPath('public/build/')
// public path used by the web server to access the output path
.setPublicPath('/build')
.cleanupOutputBeforeBuild()
.enableSourceMaps(!Encore.isProduction())
.autoProvidejQuery()
.addEntry('js/app', [
'./node_modules/jquery/dist/jquery.slim.js',
'./node_modules/popper.js/dist/popper.min.js',
'./node_modules/bootstrap/dist/js/bootstrap.min.js'
])
.addStyleEntry('css/app', [
'./node_modules/bootstrap/dist/css/bootstrap.min.css'
])
;
module.exports = Encore.getWebpackConfig();
This is the full error I am getting:
vagrant@my-project:~/code/my-project$ ./node_modules/.bin/encore dev
Running webpack ...
(node:27168) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
/home/vagrant/code/my-project/node_modules/webpack/lib/Chunk.js:468
throw new Error(
^
Error: Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead
at Chunk.get (/home/vagrant/code/my-project/node_modules/webpack/lib/Chunk.js:468:9)
at /home/vagrant/code/my-project/node_modules/@symfony/webpack-encore/node_modules/extract-text-webpack-plugin/dist/index.js:176:48
at Array.forEach (<anonymous>)
at /home/vagrant/code/my-project/node_modules/@symfony/webpack-encore/node_modules/extract-text-webpack-plugin/dist/index.js:171:18
at AsyncSeriesHook.eval [as callAsync] (eval at create (/home/vagrant/code/my-project/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:7:1)
at AsyncSeriesHook.lazyCompileHook [as _callAsync] (/home/vagrant/code/my-project/node_modules/webpack/node_modules/tapable/lib/Hook.js:35:21)
at Compilation.seal (/home/vagrant/code/my-project/node_modules/webpack/lib/Compilation.js:896:27)
at hooks.make.callAsync.err (/home/vagrant/code/my-project/node_modules/webpack/lib/Compiler.js:479:17)
at _done (eval at create (/home/vagrant/code/my-project/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:9:1)
at _err1 (eval at create (/home/vagrant/code/my-project/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:32:22)
at _addModuleChain (/home/vagrant/code/my-project/node_modules/webpack/lib/Compilation.js:764:12)
at processModuleDependencies.err (/home/vagrant/code/my-project/node_modules/webpack/lib/Compilation.js:703:9)
at _combinedTickCallback (internal/process/next_tick.js:131:7)
at process._tickCallback (internal/process/next_tick.js:180:9)
vagrant@my-project:~/code/my-project$
// composer.json
{
"require": {
"php": "^7.2.0",
"ext-iconv": "*",
"composer/package-versions-deprecated": "^1.11", // 1.11.99
"doctrine/doctrine-bundle": "^1.6", // 1.8.1
"doctrine/doctrine-cache-bundle": "^1.2", // 1.3.2
"doctrine/doctrine-fixtures-bundle": "~3.0", // 3.0.2
"doctrine/doctrine-migrations-bundle": "^1.2", // v1.3.1
"doctrine/orm": "^2.5", // v2.7.2
"friendsofsymfony/jsrouting-bundle": "^2.2", // 2.2.0
"friendsofsymfony/user-bundle": "dev-master", // dev-master
"sensio/framework-extra-bundle": "^5.1", // v5.1.5
"symfony/asset": "^4.0", // v4.0.4
"symfony/console": "^4.0", // v4.0.4
"symfony/flex": "^1.0", // v1.17.6
"symfony/form": "^4.0", // v4.0.4
"symfony/framework-bundle": "^4.0", // v4.0.4
"symfony/lts": "^4@dev", // dev-master
"symfony/monolog-bundle": "^3.1", // v3.1.2
"symfony/polyfill-apcu": "^1.0", // v1.7.0
"symfony/serializer-pack": "^1.0", // v1.0.1
"symfony/swiftmailer-bundle": "^3.1", // v3.1.6
"symfony/twig-bundle": "^4.0", // v4.0.4
"symfony/validator": "^4.0", // v4.0.4
"symfony/yaml": "^4.0", // v4.0.4
"twig/twig": "2.10.*" // v2.10.0
},
"require-dev": {
"symfony/debug-pack": "^1.0", // v1.0.4
"symfony/dotenv": "^4.0", // v4.0.4
"symfony/phpunit-bridge": "^4.0", // v4.0.4
"symfony/web-server-bundle": "^4.0" // v4.0.4
}
}// package.json
{
"devDependencies": {
"@symfony/webpack-encore": "^0.19.0", // 0.19.0
"bootstrap": "3", // 3.3.7
"copy-webpack-plugin": "^4.4.1", // 4.4.1
"font-awesome": "4", // 4.7.0
"jquery": "^3.3.1", // 3.3.1
"node-sass": "^4.7.2", // 4.7.2
"sass-loader": "^6.0.6", // 6.0.6
"sweetalert2": "^7.11.0", // 7.11.0
"webpack-notifier": "^1.5.1" // 1.5.1
}
}
"./node_modules/.bin/encore dev" command line doesn't work in windows.
neither does "node_modules/bin/encore dev".
You can run "yarn run encore dev" instead