Deployed Webpack - Bootstrap Not Working - DigitalOcean - express

Question

I'm deploying my first webpack app. I probably have a few misconceptions.
My (simple) app is Webpack2 + Bootstrap4 + ReactJS.
I ran ... npm run prod (the optimizing sequence).
My "dist" folder now contains the files & folder that I list below.
I use DigitalOcean, Nginx, express, ... to deploy my Webpack app.
I uploaded my Webpack app into a directory that is in my DigitalOcean top directory.
In this directory named "wp2-bs4-rjs", I placed:
index.html, app.bundle.js, app.css, imgs (folder).
This "wp2-bs4-rjs" directory also contains:
package.json (for express) & node_modules folder (for express, for deployment).
I'm assuming my Webpack app does not use the node_modules folder,
now that it has been optimized (?).
IMPORTANT: When I use webpack-dev-server in my computer's localhost,
the Bootstrap & jQuery works (everything works).
BUT, when I view my Webpack app online, I see the text and its background image,
but no Bootstrap influence.
Since I see my background image & my css styles, I know the app.css file is properly working.
Also, since I see my text, I know my app.bundle.js file is partially working.
BUT, for some reason, the Bootstrap & jQuery in my app.bundle.js file is not working.
I have no errors in my JavaScript console & the networking tab.
Do you have any ideas of what I'm doing wrong ?
Here's it's URL: wp2-bs4-rjs
My Webpack app is served on my domain's localhost, port 3000, using reverse proxy.
- - - - - - - - - - - - - - - - - -
Thank-you, MLR
========================================================================
Update: I tried installing a few Node packages as dependencies,
to see if it made a difference. It did not.
Installed in my DigitalOcean server & my computer's webpack-dev-server (Webpack project):
"babel-cli": "^6.24.1", "babel-preset-es2015": "^6.24.1", "babel-preset-react": "^6.24.1", "bootstrap": "^4.0.0-alpha.6", "express": "^4.15.3", "jquery": "^3.2.1", "react": "^15.6.1", "react-dom": "^15.6.1", "tether": "^1.4.0", "webpack": "^3.0.0"
- - - - - - - - - - - - - - - - - -
Not installed in my DigitalOcean server >Webpack project,
but is installed in my computer's webpack-dev-server version:
ejs, css-loader, style-loader, sass-loader, node-sass, extract-text-webpack-plugin, webpack-dev-server, babel-loader, babel-core, rimraf, file-loader, image-webpack-loader, libpng, bootstrap-loader, resolve-url-loader, url-loader, imports-loader exports-loader, postcss postcss-loader, purifycss-webpack, purify-css
========================================================================
Update: Since the node_modules folder is in the same directory as app.bundle.js ...
& all the other (non-image) files, ...
in the app.bundle.js, I tried changing all occurrences of ./node_modules to node_modules.
It did not work. Although my problem could be a combination of errors.
========================================================================
Hi olore, here's my Webpack config (as you asked).
'use strict';
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
const glob = require('glob');
const PurifyCSSPlugin = require('purifycss-webpack');
const isProd = process.env.NODE_ENV === 'production';
const cssDev = ['style-loader','css-loader', 'resolve-url-loader', 'sass-loader'];
const cssProd = ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader','sass-loader'],
publicPath: '/dist'
});
let cssConfig = isProd ? cssProd : cssDev;
module.exports = {
entry: {
app: './src/app.js'
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].bundle.js'
},
resolve: { extensions: ['.js','.jsx','.html','.css','.scss'] },
module: {
rules: [{
test: /\.scss$/,
use: cssConfig// potentially the ExtractTextPlugin.extract(...)
},{
test: /\.js$/,
use: 'babel-loader',
exclude: /node_modules/
},{
test: /\.(jpe?g|png|gif|svg)$/i,
use: [
'file-loader?name=[name].[ext]&outputPath=imgs/&publicPath=./',
'image-webpack-loader'
]
},{
test: /\.(woff2?|svg)$/,
use: 'url-loader?limit=10000&name=fonts/[name].[ext]'
},{
test: /\.(ttf|eot)$/,
use: 'file-loader&name=fonts/[name].[ext]'
},{
test: /bootstrap[\/\\]dist[\/\\]js[\/\\]umd[\/\\]/,
use: 'imports-loader?jQuery=jquery'
}
],
},
devServer: {
contentBase: path.join(__dirname, 'dist'),
compress: true,
hot: true,
open: true,
stats: 'errors-only'
},
plugins: [
new HtmlWebpackPlugin({
title: 'ReactJS Webpack Bootstrap',
hash: true,
template: './index.html',
minify: {collapseWhitespace: true}
}),
new ExtractTextPlugin({
filename: '[name].css',
disable: !isProd,
allChunks: true
}),
new PurifyCSSPlugin({
paths: glob.sync(path.join(__dirname, 'index.html')),
purifyOptions: { minify: true }
}),
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin(),
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery",
Tether: "tether",
"window.Tether": "tether",
Alert: "exports-loader?Alert!bootstrap/js/dist/alert",
Button: "exports-loader?Button!bootstrap/js/dist/button",
Carousel: "exports-loader?Carousel!bootstrap/js/dist/carousel",
Collapse: "exports-loader?Collapse!bootstrap/js/dist/collapse",
Dropdown: "exports-loader?Dropdown!bootstrap/js/dist/dropdown",
Modal: "exports-loader?Modal!bootstrap/js/dist/modal",
Popover: "exports-loader?Popover!bootstrap/js/dist/popover",
Scrollspy: "exports-loader?Scrollspy!bootstrap/js/dist/scrollspy",
Tab: "exports-loader?Tab!bootstrap/js/dist/tab",
Tooltip: "exports-loader?Tooltip!bootstrap/js/dist/tooltip",
Util: "exports-loader?Util!bootstrap/js/dist/util"
})
]
};