Enhance the webpack-encore integration

[alOneh]

This enhance the first integration (#586) of webpack-encore.

Fixes :

• jquery issue
• typeahead issue
• delete modal issue

• Add build sources
• Update webpack-encore version

[alOneh]

I made a PR on webpack-encore to provide this automatically

[javiereguiluz]

Thanks a lot for working on this! I've tested your PR in the page where most JS is used (/app_dev.php/en/admin/post/1/edit) and:

• The "Delete post" modal works
• The datepicker works too
• I don't see any error in the browser console

However, the following doesn't work yet:

• The label autocompletion
• The code syntax highlight (the modal window appears, but the code shows no color)

[alOneh]

Yes I notice that the code don't get highlight colors, I'm working on it.

[alOneh]

@javiereguiluz all issues have been addressed

[javiereguiluz]

I've reviewed your latest changes. Everything is indeed fixed. Thanks a lot!

---

Now I have 3 comments:

1. Why "import" instead of "require" ? PHPStorm is showing some warning messages too:

If "import" is the way to go, we should update Encore docs too.

2. I don't remember if the autocomplete feature worked this way before ... but right now it only autocompletes de already existing tags of the post. This is not very intuitive. @yceruto maybe can confirm if this is the expected behavior:

3. The file sizes of the assets generated for production seems OK ... except for app.js ... which weights more than 600 KB because it includes the highlighting code for ALL languages (although you configured only PHP and Twig ... this happened to me too).

[alOneh]

1/ As we are in ES6 syntax we can use import, require is a ES2015 syntax to load modules, if you inspect your bundle you will see that webpack (due to Babel) transform those import by require. To fix the IDE issue you can switch the syntax to ES6 to get rid of warnings.

3/ I drop the app.js size to 2 ko

[yceruto]

@javiereguiluz AFAIK the expected autocomplete list will be all available tags (used or not) and you can also insert new ones (typing it there + enter). Just a few tags we have by default :)

[...] This is not very intuitive [...]

I'm not sure what do you mean?

[javiereguiluz]

@alOneh I've tested your last changes and everything is great! To me this PR is now ready to be merged.

The only optional change I'd like to do is to get rid of the moment.js library. It's humongous and it makes our admin.js to weight almost 400 KB 😱

@yceruto never mind, let's keep it as is and we'll tweak it in the future if needed. Thanks!

[stof]

@alOneh does moment has a way to skip the import of the part loading locales dynamically, as you did for highlight.js ? This would avoid bundling all moment locales if we don't need them.

[alOneh]

@stof yes we can, I made a fix and after that the admin.js size is ~180 KB.

It can be ugly but as webpack config is an object we can do that even if it will be nice if we can add this kind of feature to the webpack-encore API. I'll make a proposal later.

[javiereguiluz]

Tested again and it works perfectly. This is now finished, so I'm merging it and later, if needed, @weaverryan can make any tweak to this config before releasing the new version of the Symfony Demo. Thanks @alOneh!

[alOneh]

@javiereguiluz I don't push build files !