webpack 意外修改了 *.js [英] unexpected modifying of the *.js by webpack
问题描述
我是 webpack 和类似工具的新手.我想重新组织我的项目.目前我所有的 JS 代码都在 App.js 中.因此，在将其拆分为模块并进行改进之前，我只想设置用于复制它的工作流程.这是 webpack.config.js 的内容:
I'm new to webpack and similar tools. I wanted to reorganize my project. Currently all my JS-code lives in App.js. So before splitting it into modules and improving, I wanted just to set up the workflow for copying it. This is the content of 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")
],
}],
},
};
我在 这个视频课程.但之后并非所有功能都有效.例如，事件侦听器调用的函数工作:
which I learned at this video course. But afterwards not all functions work. For instance, the functions called by event listeners work:
function initOnClickForVersionBtns() {
$('#btn_soprano').click(function () {
voice = 1;
loadFile();
});
$('#btn_basset').click(function () {
voice = 2;
loadFile();
});
}
但是那些从 HTML 调用的不会:
But those called from HTML do not:
<a href="javascript:void(0);" onclick="switchToScore();">Score</a>
请注意，我仍在从 HTML 中引用其他一些 js 文件:
Note that I am still referencing few others js files from HTML:
<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>
我希望稍后更改，但目前我认为这应该不是问题.也许是?
I'd like it to change later, but currently I thought it should not be a problem. Maybe it is?
推荐答案
Webpack 将所有代码包装在 IIFE 中，以实现更可预测的行为并避免全局污染等.在捆绑代码中，定义模块函数的位置不是
