Enhance the webpack-encore integration

app/Resources/assets/js/admin.js

@@ -1,10 +1,7 @@
-require('eonasdan-bootstrap-datetimepicker');
-
-require('imports-loader?define=>false!typeahead.js/dist/typeahead.jquery.min.js');
-const Bloodhound = require('imports-loader?define=>false!typeahead.js/dist/bloodhound.js');
-window.Bloodhound = Bloodhound;
-require('../scss/bootstrap-tagsinput.scss');
-require('bootstrap-tagsinput');
+import 'eonasdan-bootstrap-datetimepicker';
+import 'typeahead.js';
+import Bloodhound from "bloodhound-js";
+import 'bootstrap-tagsinput';
 
 $(function() {
     // Datetime picker initialization.
@@ -33,16 +30,17 @@ $(function() {
             datumTokenizer: Bloodhound.tokenizers.whitespace
         });
         source.initialize();
+
         $input.tagsinput({
             trimValue: true,
             focusClass: 'focus',
-            typeahead: {
+            typeaheadjs: {
                 name: 'tags',
                 source: source.ttAdapter()
             }
         });
     }
-})
+});
 
 // Handling the modal confirmation message.
 $(document).on('submit', 'form[data-confirmation]', function (event) {

app/Resources/assets/js/app.js

@@ -1,7 +1,7 @@
 // loads the Bootstrap jQuery plugins
-require('bootstrap-sass/assets/javascripts/bootstrap/dropdown.js');
-require('bootstrap-sass/assets/javascripts/bootstrap/modal.js');
-require('bootstrap-sass/assets/javascripts/bootstrap/transition.js');
+import 'bootstrap-sass/assets/javascripts/bootstrap/dropdown.js';
+import 'bootstrap-sass/assets/javascripts/bootstrap/modal.js';
+import 'bootstrap-sass/assets/javascripts/bootstrap/transition.js';
 
 // loads the code syntax highlighting library
-require('./highlight.js');
+import './highlight.js';

app/Resources/assets/js/highlight.js

@@ -1,9 +1,8 @@
-var hljs = require('highlight.js/lib/highlight.js');
+import hljs from 'highlight.js/lib/highlight';
+import php from 'highlight.js/lib/languages/php';
+import twig from 'highlight.js/lib/languages/twig';
 
-hljs.configure({
-    languages: ['twig', 'php']
-});
+hljs.registerLanguage('php', php);
+hljs.registerLanguage('twig', twig);
 
 hljs.initHighlightingOnLoad();
-
-module.exports = hljs;

app/Resources/assets/scss/admin.scss

@@ -1,5 +1,6 @@
 @import "~bootswatch/flatly/variables";
 @import "~eonasdan-bootstrap-datetimepicker/src/sass/bootstrap-datetimepicker-build.scss";
+@import "bootstrap-tagsinput.scss";
 
 /* Page: 'Backend post index'
    ------------------------------------------------------------------------- */

package.json

@@ -14,5 +14,11 @@
     "node-sass": "^4.5.3",
     "sass-loader": "^6.0.5",
     "typeahead.js": "^0.11.1"
+  },
+  "scripts": {
+    "dev-server": "./node_modules/.bin/encore dev-server",
+    "dev": "./node_modules/.bin/encore dev",
+    "watch": "./node_modules/.bin/encore dev --watch",
+    "build": "./node_modules/.bin/encore production"
   }
 }

webpack.config.js

@@ -1,10 +1,16 @@
 var Encore = require('@symfony/webpack-encore');
+var webpack = require('webpack');
 
 Encore
     .setOutputPath('web/build/')
     .setPublicPath('/build')
     .cleanupOutputBeforeBuild()
     .autoProvidejQuery()
+    .autoProvideVariables({
+        "window.jQuery": "jquery",
+        "window.Bloodhound": require.resolve('bloodhound-js'),
+        "jQuery.tagsinput": "bootstrap-tagsinput"
+    })
     .enableSassLoader()
     .enableVersioning(false)
     .createSharedEntry('js/common', ['jquery'])
@@ -15,4 +21,8 @@ Encore
     .addStyleEntry('css/admin', ['./app/Resources/assets/scss/admin.scss'])
 ;
 
-module.exports = Encore.getWebpackConfig();
+var config = Encore.getWebpackConfig();
+
+config.plugins.push(new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/));
+
+module.exports = config;