I have been working on organizing my javascript files for a static HTML website. Currently, they are scattered across different HTML files using the script tag.
To streamline this, I have created a main.js file that requires all the other files. This main.js file serves as the entry point for webpack.
While this method works for my custom files, I am encountering errors with the bootstrap, tether, and jquery files.
It is worth noting that I did not install jquery or bootstrap using npm. Instead, I downloaded the javascript files, placed them in the same folder, and included them in the main.js file using require. Could this approach be causing the issues?
// webpack.config.js
var path = require('path')
module.exports = {
entry: ['./js/main'], // file extension after index is optional for .js files
output: {
path: path.join(__dirname, 'js'),
filename: 'bundle.js'
}
}
main.js:
require('./jquery-3.1.1.slim.min.js');
require('./tether.min.js');
require('./bootstrap.min.js');
require('./navigation.js');
require('./geschichte.js');
require('./iziToast.min.js');
require('./kontakt.js');
edit:
My error message reads:
Uncaught Error: Bootstrap's JavaScript requires jQuery. jQuery must be included before Bootstrap's JavaScript.
at Object.<anonymous> (bundle.js:119)
at __webpack_require__ (bundle.js:20)
at Object.<anonymous> (bundle.js:79)
at __webpack_require__ (bundle.js:20)
at Object.<anonymous> (bundle.js:70)
at __webpack_require__ (bundle.js:20)
at bundle.js:63
at bundle.js:66
- Even though jQuery is included, it seems to be causing issues.