$未定义webpack导入html文件

Question

我正在使用WebPack捆绑我的Bootstrap和自定义js。然后，我使用ProvidePlugin Webpack插件将jquery添加到我的项目中。

new webpack.ProvidePlugin({
   $: 'jquery',
   jQuery: 'jquery'
})

我想将'header.html'和'footer.html'文件导入到不同的模板中，因此我的主要html文件不会太混乱。

我在网上发现要执行此操作的方法是使用jquery加载html文件，但是由于WebPack在我的jquery之后添加了我的捆绑软件，因此出现错误，但是我不确定如何解决。

我编译的html文件如下：

<script>
    $('#header').load('./templates/header.html');
</script>
<script src="main.[hashCode].js"></script></body>

给出错误的地方

$ is not defined

我尝试将脚本添加到我的app.js文件中，但这似乎无济于事

app.js

import 'bootstrap';
import '../node_modules/@fortawesome/fontawesome-free/css/all.css';
import '../node_modules/@fortawesome/fontawesome-free/js/all.js';
import './scss/app.scss';

$('#header').load('./templates/header.html');