webpack 对 *.js 的意外修改

我是 webpack 和类似工具的新手。我想重新组织我的项目。目前我所有的 JS 代码都位于 App.js 中。因此，在将其拆分为模块并进行改进之前，我只想设置复制它的工作流程。 这是 webpack.config.js 的内容：

const path = require('path');

module.exports = {
  mode: 'development',
  entry: {
    App: "./app/assets/scripts/App.js"
  },
  output: {
    path: path.resolve(__dirname, './app/temp/scripts'),
    filename: '[name].js',
  },
  module: {
    rules: [{
      loader: 'babel-loader',
      query: {
        presets: ['es2015']
      },

      test: /\.js$/,

      include: [
        path.resolve(__dirname, "app")
      ],
      exclude: [
        path.resolve(__dirname, "node_modules")
      ],

    }],
  },
};

我在哪里学到的this https://www.udemy.com/course/git-a-web-developer-job-mastering-the-modern-workflow/视频课程。但之后并非所有功能都可以使用。例如，事件侦听器调用的函数起作用：

function initOnClickForVersionBtns() {
    $('#btn_soprano').click(function () {
        voice = 1;
        loadFile();
    });

    $('#btn_basset').click(function () {
        voice = 2;
        loadFile();
    });

}

但那些从 HTML 调用的则不会：

<a href="javascript:void(0);" onclick="switchToScore();">Score</a>

请注意，我仍然从 HTML 引用其他一些 js 文件：

<script src="../javascript/basic-events.js" type="text/javascript">/**/</script>
<script src="../javascript/bootstrap.min.js" type="text/javascript">/**/</script>
<script src="../javascript/jquery-3.3.1.min.js" type="text/javascript">/**/</script>

我希望以后能改变，但目前我认为这应该不是问题。也许是吧？

Webpack 将所有代码包装在 IIFE 中，以实现更可预测的行为并避免全局污染等。在捆绑的代码中，定义模块函数的位置是not的顶层<script>.

内联属性事件处理程序只能引用全局变量。 https://stackoverflow.com/a/59539045，并且几乎在所有情况下都是一个坏主意。虽然您可以通过显式地将函数分配给来修复它window, eg:

window.switchToScore = function() {
  // ...

代替

function switchToScore() {
  // ...

这将是much最好完全删除内联属性事件处理程序，并使用 Javascript 附加侦听器，就像您所做的那样

$('#btn_soprano').click(function () {
    voice = 1;
    loadFile();
});