How to Merge to external File

app/assets/javascripts/how_to_merge.js

+document.addEventListener('DOMContentLoaded', () => {
+  const modal = $('#modal_merge_info').modal({
+    modal: true,
+    show: false,
+  });
+  $('.how_to_merge_link').bind('click', () => {
+    modal.show();
+  });
+  $('.modal-header .close').bind('click', () => {
+    modal.hide();
+  });
+});

app/views/projects/merge_requests/_how_to_merge.html.haml

+- content_for :page_specific_javascripts do
+  = webpack_bundle_tag('how_to_merge')
+
 #modal_merge_info.modal
   .modal-dialog
     .modal-content
@@ -50,14 +53,3 @@
           = succeed '.' do
             You can also checkout merge requests locally by
             = link_to 'following these guidelines', help_page_path('user/project/merge_requests/index.md', anchor: "checkout-merge-requests-locally"), target: '_blank', rel: 'noopener noreferrer'
-
-:javascript
-  $(function(){
-    var modal = $('#modal_merge_info').modal({modal: true, show:false});
-    $('.how_to_merge_link').bind("click", function(){
-      modal.show();
-    });
-    $('.modal-header .close').bind("click", function(){
-      modal.hide();
-    })
-  })

config/webpack.config.js

@@ -42,6 +42,7 @@ var config = {
     group:                './group.js',
     groups:               './groups/index.js',
     groups_list:          './groups_list.js',
+    how_to_merge:         './how_to_merge.js',
     issue_show:           './issue_show/index.js',
     integrations:         './integrations',
     job_details:          './jobs/job_details_bundle.js',