CODEWITHSUNDEEP
javascriptwebpack
Daniel Gretzke
Daniel Gretzke

Reputation: 446

Including JS files in Webpack

I am currently working on a project using webpack. I'm sorry if this question seems silly, but it's my first webpack project and it's kinda hard to learn. I want to add a bootstrap template to my project, but I have a hard time implementing it. I successfully managed to implement all css files needed for this template using:

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";

But I have a hard time to implement the Javascript files needed for the project. Including them in the HTML file like this:

<!-- 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>

doesn't work. Also requiring them in my app.js file like this:

// 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");

doesn't work either. How can I include these JS files into my project?

Upvotes: 0

Views: 687

Answers (1)

Bharathvaj Ganesan
Bharathvaj Ganesan

Reputation: 3184

It is not the right way to use bootstrap in webpack. There are many loaders in the webpack for using bootstrap. Try bootstrap-loader. this loader will load the bootstrap styles and scripts which are needed (code-splitting). Since you are beginner in webpack I recommend you to check out this video on youtube for better understanding.

Upvotes: 1

Related Questions