如何在内联javascript上使用webpack模块

我是一个缺乏经验的web开发人员，尤其是在JavaScript方面。最近我一直在努力解决这个问题，自从拉威尔的《我的选择框架》问世以来，我试图改变“旧”风格：

<script src="script1.js"></script>
<script src="script2.js"></script>
…

webpack.mix.js文件包含：

mix.autoload（{jquery:['$'，'jquery'，'window.jquery']}）；
webpackConfig（{resolve:{alias:{jquery:{jquery:jquery/src/jquery}}}）；
mix.js([
'resources/js/app.js'，
'resources/js/settings.js'
]，“public/js”）
.摘录([
“lodash”，
“jquery”，
[…]
“引导日期选择器”，
“引导年份日历”
]);

并且主布局在“”之前有以下脚本：

这个设置似乎正在运行，但最后一个问题我似乎无法解决。我还在特定页面上添加了一些javascript，其功能仅限于这些页面（使用非默认设置初始化选择器、自定义表单行为等）。因此，有些页面在

之前有一个额外的

[自定义代码]

部分

但是，那里的代码没有访问模块的权限：

$（'.input daterange'）.datepicker（）

应该将输入初始化为引导数据采集器实例，但它不是。当然，使用“旧式”是可行的。现在，我得到一个

TypeError:undefined不是一个函数（靠近“…$（“.input daterange”）.datepicker…）

error

因此，我的问题是：如何导入必要的模块，以便在嵌入HTML文件的脚本中使用

---

旁白：当我差不多写完这个问题时，我偶然发现了答案。尽管如此，我还是决定发布它，因为a）它可能会帮助其他人，b）如果有更好的方法，我很乐意听到它。

不是在嵌入式javascript上导入，而是在我的

app.js

或

settings.js

文件上导入，使其工作：

import 'bootstrap-datepicker';
import 'bootstrap-year-calendar';

然而，在

settings.js

而不是

app.js

上进行导入似乎会导致一些问题，因为它破坏了一些单独的功能。我不确定这是否是因为

app.js

列在

webpack.mix.js

文件的第一位（如下所示），但是导入的文件确实很重要

mix.js([
    'resources/js/app.js',
    'resources/js/settings.js'
], 'public/js')

---

导入不是在嵌入式javascript上进行的，而是在我的

app.js

或

settings.js

文件上进行的，这样就可以工作了：

import 'bootstrap-datepicker';
import 'bootstrap-year-calendar';

然而，在

settings.js

而不是

app.js

上进行导入似乎会导致一些问题，因为它破坏了一些单独的功能。我不确定这是否是因为

app.js

列在

webpack.mix.js

文件的第一位（如下所示），但是导入的文件确实很重要

mix.js([
    'resources/js/app.js',
    'resources/js/settings.js'
], 'public/js')