javascript - 在Webpack中包含JS文件

Question

我目前正在开发一个使用 webpack 的项目。如果这个问题看起来很愚蠢，我很抱歉，但这是我的第一个 webpack 项目，而且有点难学。我想向我的项目添加一个引导模板，但我很难实现它。我成功地使用以下方法实现了该模板所需的所有 css 文件:

import "../vendor/bootstrap/css/bootstrap.min.css";
import "../vendor/font-awesome/css/font-awesome.min.css";
import "../vendor/datatables/dataTables.bootstrap4.css";
import "../css/sb-admin.css";

但是我很难实现该项目所需的 Javascript 文件。将它们包含在 HTML 文件中，如下所示:

<!-- Bootstrap core JavaScript -->
<script src="../vendor/jquery/jquery.min.js"></script>
<script src="../vendor/popper/popper.min.js"></script>
<script src="../vendor/bootstrap/js/bootstrap.min.js"></script>

<!-- Plugin JavaScript -->
<script src="../vendor/jquery-easing/jquery.easing.min.js"></script>
<script src="../vendor/chart.js/Chart.min.js"></script>
<script src="../vendor/datatables/jquery.dataTables.js"></script>
<script src="../vendor/datatables/dataTables.bootstrap4.js"></script>

<!-- Custom scripts for this template -->
<script src="../js/sb-admin.min.js"></script>

不起作用。还要求它们出现在我的 app.js 文件中，如下所示:

// Bootstrap core JavaScript
require("../vendor/jquery/jquery.min.js");
require("../vendor/popper/popper.min.js");
require("../vendor/bootstrap/js/bootstrap.min.js");

// Plugin JavaScript
require("../vendor/jquery-easing/jquery.easing.min.js");
require("../vendor/chart.js/Chart.min.js");
require("../vendor/datatables/jquery.dataTables.js");
require("../vendor/datatables/dataTables.bootstrap4.js");

// Custom scripts for this template
require("../js/sb-admin.min.js");

也不起作用。如何将这些 JS 文件包含到我的项目中？

Answer 1

在webpack中使用bootstrap不是正确的方式。 webpack 中有很多用于使用 bootstrap 的加载器。试试bootstrap-loader 。该加载器将加载所需的引导样式和脚本(代码分割)。由于您是 webpack 的初学者，我建议您查看 this YouTube 上的视频以便更好地理解。