我是 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>
我希望以后能改变,但目前我认为这应该不是问题。也许是吧?