Including JS files in Webpack

Question

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?

what does your webpack config look like? I would say the proper way to do this in webpack is to declare a vendor entrypoint in webpack config so that you can actually take advantage of the code splitting — aug
– aug, Commented Sep 9, 2017 at 0:15

Bharathvaj Ganesan · Accepted Answer · 2017-09-09 11:32:46Z

1

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.

edited Sep 9, 2017 at 11:32

answered Sep 9, 2017 at 5:49

Bharathvaj Ganesan

3,2241 gold badge22 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Including JS files in Webpack

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related