I am recently working on projects using Webpack, JS and Bootstrap, but suddenly on the project I am currently working on, and despite using the same Webpack and npm configs the bootstrap Javascript stopped working, although It shows in the javascript bundle in the Sources tab in the browser.
Notes:
- All my .js files and styles in the entry file i.e index.js work fine and all libraries, too.
- The order of imported files is:
- jquery
- popper.js
- bootstrap.min.js
- Using CDNs for both Jquery and Bootstrap instead of imports did not fix the problem.
Here is the code on GitHub: https://github.com/WeamAdel/webpack-template
Webpack.config.js:
module.exports = {
entry: {
main: "./src/index.js",
home: "./src/assets/js/home.js",
},
output: {
// filename: "assets/js/[name].[fullhash:7].js",
path: path.resolve(__dirname, "build"),
},
devServer: {
port: 9000,
contentBase: path.resolve(__dirname, "build"),
},
module: {
rules: [
//JS
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: "babel-loader",
options: {
presets: ["@babel/preset-env"],
},
},
},
// HTML
{
test: /\.html$/i,
loader: "html-loader",
},
//Pug
{
test: /\.pug$/i,
use: ["html-loader", "pug-html-loader"],
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: "./src/index.pug",
chunks: ["main", "home"],
}),
new CleanWebpackPlugin(),
],
optimization: {
minimize: true,
minimizer: [
`...`,
new CssMinimizerPlugin(),
],
},
};
index.js
import "jquery";
import "popper.js";
import "bootstrap/dist/js/bootstrap.min";
