Javascript Web包对*.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")
      ],

    }],
  },
};

这是我在视频课程上学到的。但之后并非所有功能都能工作。例如，事件侦听器调用的函数可以工作：

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将所有代码封装在一个生命周期中，以实现更可预测的行为和避免全球污染等。在捆绑代码中，模块功能的定义位置不是

的顶层

内联属性事件处理程序，并且在几乎所有情况下都是一个非常糟糕的主意。而您可以通过显式地将函数分配给

窗口

来修复它，例如：

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

而不是

function switchToScore() {
  // ...

最好完全删除内联属性事件处理程序，并使用Javascript附加侦听器，就像使用Javascript一样

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

---

Webpack将所有代码封装在一个生命周期中，以实现更可预测的行为和避免全球污染等。在捆绑代码中，模块功能的定义位置不是

的顶层

内联属性事件处理程序，并且在几乎所有情况下都是一个非常糟糕的主意。而您可以通过显式地将函数分配给

窗口

来修复它，例如：

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

而不是

function switchToScore() {
  // ...

最好完全删除内联属性事件处理程序，并使用Javascript附加侦听器，就像使用Javascript一样

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