Move swiper initialization to webpack bundle

Currently most of doccano's Javascript is in webpack bundles, except for
a few snippets like swiper. To increase consistency, this change moves
the swiper code also into a webpack bundle.

In addition to increasing consistency, this also has the advantages of:

1) Giving developers a single location/directory to look for all the
   Javascript.

2) Making the swiper dependency explicit by listing it in the
   package.json manifest

3) Ensuring that swiper gets built and minified in the same way as other
   dependencies.

4) Making swiper available when developing offline.

In the future, it would also be worth considering to move all the CSS
includes into webpack.

Author: c-w

app/server/package-lock.json

@@ -14,6 +14,7 @@
     "axios": "^0.18.0",
     "chart.js": "^2.7.2",
     "marked": "^0.3.19",
+    "swiper": "^4.3.3",
     "vue": "^2.5.16",
     "vue-chartjs": "^3.4.0",
     "vue-debounce": "^1.1.0",

app/server/package.json

@@ -0,0 +1,14 @@
+import Swiper from 'swiper';
+
+new Swiper('.swiper-container', {
+  // Optional parameters
+  loop: true,
+  autoplay: {
+    delay: 5000,
+  },
+  // Navigation arrows
+  navigation: {
+    nextEl: '.swiper-button-next',
+    prevEl: '.swiper-button-prev',
+  },
+});

app/server/static/js/index.js

@@ -1,5 +1,6 @@
 {% extends "base.html" %}
 {% load static %}
+{% load render_bundle from webpack_loader %}
 
 {% block header %}
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.3/css/swiper.min.css">
@@ -215,19 +216,5 @@ <h2>
 {% endblock %}
 
 {% block footer %}
-<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.3/js/swiper.min.js"></script>
-<script>
-  new Swiper('.swiper-container', {
-    // Optional parameters
-    loop: true,
-    autoplay: {
-      delay: 5000,
-    },
-    // Navigation arrows
-    navigation: {
-      nextEl: '.swiper-button-next',
-      prevEl: '.swiper-button-prev',
-    },
-  })
-</script>
-{% endblock %}
+{% render_bundle 'index' 'js' %}
+{% endblock %}

app/server/templates/index.html

@@ -8,6 +8,7 @@ const hotReload = process.env.HOT_RELOAD === '1';
 module.exports = {
     mode: devMode ? 'development' : 'production',
     entry: {
+        'index': './static/js/index.js',
         'sequence_labeling': './static/js/sequence_labeling.js',
         'document_classification': './static/js/document_classification.js',
         'seq2seq': './static/js/seq2seq.js',