Внешний скрипт работает до того, как я использую webpack 4, но не после

Question

Мой внешний скрипт работал нормально до тех пор, пока я не использовал webpack 4. Тег скрипта помещается в конце тела html.

Я попытался поместить скрипт в раздел head.- не работает, я пытался связать свой исходный файл js (до веб-упаковки) - работал, я пытался поместить код в тег встроенного скрипта - работал

До Webpack Pen: https://codepen.io/mootookoi/pen/pXWXBN

<div>
    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
    <a class="next" onclick="plusSlides(1)">&#10095;</a>
</div>


var slideIndex = 1;
var media = window.matchMedia("screen and (min-width: 85.5em)");
showSlides(slideIndex);
media.addListener(showSlides);

function plusSlides(n) {
    showSlides(slideIndex += n);
}

function currentSlide(n) {
    showSlides(slideIndex = n);
}

function showSlides(n) {
    var i;
    var slides = document.getElementsByClassName("mySlides");
    var links = document.getElementsByClassName("slider-a");
    if (n > slides.length) {slideIndex = 1}    
    if (n < 1) {slideIndex = slides.length}
    for (i = 0; i < slides.length; i++) {
        slides[i].style.display = "none";  
        links[i].style.display = "none";
    }
    if (media.matches) {
        for (i = 0; i < slides.length; i++) {
          links[i].style.display = "inline-block";
        }
    }
    for (i = 0; i < links.length; i++) {
        links[i].className = links[i].className.replace(" active", "");
    }
    slides[slideIndex-1].style.display = "flex";  
    links[slideIndex-1].className += " active";
    links[slideIndex-1].style.display = "inline-block";
}

После пера Webpack: https://codepen.io/mootookoi/pen/VJMJNV

/******/ (function(modules) { // webpackBootstrap
/******/    // The module cache
/******/    var installedModules = {};
/******/
/******/    // The require function
/******/    function __webpack_require__(moduleId) {
/******/
/******/        // Check if module is in cache
/******/        if(installedModules[moduleId]) {
/******/            return installedModules[moduleId].exports;
/******/        }
/******/        // Create a new module (and put it into the cache)
/******/        var module = installedModules[moduleId] = {
/******/            i: moduleId,
/******/            l: false,
/******/            exports: {}
/******/        };
/******/
/******/        // Execute the module function
/******/        modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/        // Flag the module as loaded
/******/        module.l = true;
/******/
/******/        // Return the exports of the module
/******/        return module.exports;
/******/    }
/******/
/******/
/******/    // expose the modules object (__webpack_modules__)
/******/    __webpack_require__.m = modules;
/******/
/******/    // expose the module cache
/******/    __webpack_require__.c = installedModules;
/******/
/******/    // define getter function for harmony exports
/******/    __webpack_require__.d = function(exports, name, getter) {
/******/        if(!__webpack_require__.o(exports, name)) {
/******/            Object.defineProperty(exports, name, { enumerable: true, get: getter });
/******/        }
/******/    };
/******/
/******/    // define __esModule on exports
/******/    __webpack_require__.r = function(exports) {
/******/        if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/            Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/        }
/******/        Object.defineProperty(exports, '__esModule', { value: true });
/******/    };
/******/
/******/    // create a fake namespace object
/******/    // mode & 1: value is a module id, require it
/******/    // mode & 2: merge all properties of value into the ns
/******/    // mode & 4: return value when already ns object
/******/    // mode & 8|1: behave like require
/******/    __webpack_require__.t = function(value, mode) {
/******/        if(mode & 1) value = __webpack_require__(value);
/******/        if(mode & 8) return value;
/******/        if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
/******/        var ns = Object.create(null);
/******/        __webpack_require__.r(ns);
/******/        Object.defineProperty(ns, 'default', { enumerable: true, value: value });
/******/        if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
/******/        return ns;
/******/    };
/******/
/******/    // getDefaultExport function for compatibility with non-harmony modules
/******/    __webpack_require__.n = function(module) {
/******/        var getter = module && module.__esModule ?
/******/            function getDefault() { return module['default']; } :
/******/            function getModuleExports() { return module; };
/******/        __webpack_require__.d(getter, 'a', getter);
/******/        return getter;
/******/    };
/******/
/******/    // Object.prototype.hasOwnProperty.call
/******/    __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/    // __webpack_public_path__
/******/    __webpack_require__.p = "";
/******/
/******/
/******/    // Load entry module and return exports
/******/    return __webpack_require__(__webpack_require__.s = 0);
/******/ })
/************************************************************************/
/******/ ({

/***/ "./css/app.scss":
/*!**********************!*\
  !*** ./css/app.scss ***!
  \**********************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {

// extracted by mini-css-extract-plugin

/***/ }),

/***/ "./js/app.js":
/*!*******************!*\
  !*** ./js/app.js ***!
  \*******************/
/*! no static exports found */
/***/ (function(module, exports) {

var slideIndex = 1;
var media = window.matchMedia("screen and (min-width: 85.5em)");
showSlides(slideIndex);
media.addListener(showSlides);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var links = document.getElementsByClassName("slider-a");

  if (n > slides.length) {
    slideIndex = 1;
  }

  if (n < 1) {
    slideIndex = slides.length;
  }

  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
    links[i].style.display = "none";
  }

  if (media.matches) {
    for (i = 0; i < slides.length; i++) {
      links[i].style.display = "inline-block";
    }
  }

  for (i = 0; i < links.length; i++) {
    links[i].className = links[i].className.replace(" active", "");
  }

  slides[slideIndex - 1].style.display = "flex";
  links[slideIndex - 1].className += " active";
  links[slideIndex - 1].style.display = "inline-block";
}

/***/ }),

/***/ 0:
/*!****************************************!*\
  !*** multi ./js/app.js ./css/app.scss ***!
  \****************************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {

__webpack_require__(/*! ./js/app.js */"./js/app.js");
module.exports = __webpack_require__(/*! ./css/app.scss */"./css/app.scss");


/***/ })

/******/ });
//# sourceMappingURL=app.js.map

Сообщение об ошибке:
ReferenceError: plusSlides не определено
ReferenceError: currentSlide не определено

Пакет.json

{
  "name": "webprod-dev-tools",
  "version": "1.0.0",
  "description": "webpack + others",
  "private": true,
  "scripts": {
    "build": "webpack -p",
    "start": "webpack -p -w",
    "debug": "webpack --mode development --devtool source-map --watch",
    "fulldebug": "webpack --mode development --debug --devtool source-map --output-pathinfo --display-chunks --display-error-details --watch --progress --colors"
  },
  "author": "mootookoi",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.4.5",
    "@babel/preset-env": "^7.4.5",
    "autoprefixer": "^9.6.0",
    "babel-loader": "^8.0.6",
    "css-loader": "^3.0.0",
    "cssnano": "^4.1.10",
    "file-loader": "^4.0.0",
    "mini-css-extract-plugin": "^0.7.0",
    "node-sass": "^4.12.0",
    "optimize-css-assets-webpack-plugin": "^5.0.1",
    "postcss": "^7.0.17",
    "postcss-import": "^12.0.1",
    "postcss-loader": "^3.0.0",
    "postcss-preset-env": "^6.6.0",
    "postcss-scss": "^2.0.0",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "terser-webpack-plugin": "^1.3.0",
    "webpack": "^4.35.0",
    "webpack-cli": "^3.3.5"
  }
}

webpack.config.js

const webpack = require('webpack');
const path = require('path');
const autoprefixer = require('autoprefixer');
const TerserPlugin = require('terser-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");

module.exports = (env, argv) => {
  const IS_DEV = argv.mode === "development";
  const IS_PROD = argv.mode === "production";

  return {
    devtool: IS_DEV ? 'cheap-eval-source-map' : '',
    entry: {
      app: [
        './js/app.js',
        './css/app.scss'
      ]
    },
    output: {
      path: path.resolve(__dirname, '../assets/js'),
      filename: '[name].js'
    },
    module: {
      rules: [
        {
          test: /\.(js|jsx)$/,
          exclude: /(node_modules|bower_components)/,
          include: [
            path.join(__dirname, '')
          ],
          use: ['babel-loader']
        },
        {
          test: /\.s[ac]ss/,
          use: [
            {loader: MiniCssExtractPlugin.loader},
            {
              loader: 'css-loader',
              options: {
                sourceMap: IS_DEV,
              }
            },
            {
              loader: 'postcss-loader',
              options: {
                sourceMap: IS_DEV,
                plugins: function () {
                  return [autoprefixer]
                }
              }
            },
            {
              loader: 'sass-loader',
              options: {
                sourceMap: IS_DEV
              }
            },
          ]
        },
        {
          test: /.(woff(2)?|eot|ttf|svg)(\?[a-z0-9=.]+)?$/,
          exclude: /(im(a)?g(e)?)(s\b|\b)/,
          loader: 'file-loader',
          options: {
            name: '../fonts/[hash].[ext]'
          }
        },
        {
          test: /\.(png|jpg|gif|svg)$/,
          use: [
            {
              loader: 'file-loader',
              options: {
                name: '../img/[name].[hash].[ext]'
              }
            }
          ]
        },
      ]
    },
    externals: {
      $: '$',
      jquery: 'jQuery'
    },
    optimization: {
      minimizer: [
        new TerserPlugin({
          parallel: true,
          test: /\.js($|\?)/i,
          sourceMap: IS_DEV,
          terserOptions: {
            compress: {
              booleans: IS_PROD,
              conditionals: IS_PROD,
              drop_console: IS_PROD,
              drop_debugger: IS_PROD,
              if_return: IS_PROD,
              join_vars: IS_PROD,
              keep_classnames: IS_DEV,
              keep_fnames: IS_DEV,
              reduce_vars: IS_PROD,
              sequences: IS_PROD,
              warnings: IS_DEV
            },
            output: {
              comments: IS_DEV
            }
          }
        }),
        new OptimizeCSSAssetsPlugin({})
      ]
    },
    plugins: [
      new MiniCssExtractPlugin({
        filename: "../css/[name].css",
        chunkFilename: "../css/[id].css"
      }),
    ],
    watchOptions: {
      ignored: /node_modules/
    }
  }
}