Question

我目前正在使用webpack开展项目。如果这个问题看起来很愚蠢，我很抱歉，但这是我的第一个webpack项目，这有点难以学习。我想在我的项目中添加一个bootstrap模板，但是我很难实现它。我成功地使用以下方法实现了此模板所需的所有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的初学者，我建议您在youtube上查看this视频，以便更好地理解。

在Webpack中包含JS文件

1 个答案: