I have a ten-year old node application which I am now (at long last) upgrading to the latest packages. I have finally got everything compiled without error, and the reward is that npm creates a new dist folder which, I guess, should allow the browser to run the application. However, when I access the application from the web, it loads the index.html file but then nothing happens. The dist folder contains just two files: app.bundle.js and t.bundle.js. Now here is the odd thing: if I replace this dist folder by the original dist folder, as compiled months ago before I started the upgrade, everything works! This original dist folder contains 66 items,including app.bundle.js and t.bundle.js.
However, this is very unsatisfactory. The working dist folder is frozen, and all the changes I made in the last months to the source are ignored. I am guessing this is due to the configuration in the package.json and webpack.js files still pointing at the legacy implementation. However, I can not work out from all the documentation I have looked at just how thw package.json and webpack.js should be set up now.
Here is how files are arranged:
tc (top level)
-- package.json
-- public folder
-- various other folders containing source for the server backend
-- node-modules folder
public (folder contained in tc)
-- dist folder
-- app folder
-- index.html
-- t.html
-- webpack.js
app (folder contained in public)
-- app.html
-- hundreds of files holding all the code presented by the browser
Here is the package.json file:
{
"name": "tc",
"version": "0.0.0",
"private": true,
"scripts": {
"start": "pm2 startOrReload pm2.json",
"prod": "pm2 startOrReload pm2.json --env production",
"logs": "pm2 logs",
"test": "node --use_strict $(npm bin)/jasmine"
},
"dependencies": {
"angular2": "2.0.0-beta.15",
"async": "^3.2.6",
"base64url": "^3.0.1",
"bcrypt": "^5.1.1",
"body-parser": "^1.20.2",
"bootstrap": "^5.3.3",
"bootstrap-less": "^3.3.8",
"bson": "^6.8.0",
"codemirror": "^5.65.17",
"connect-flash": "^0.1.1",
"connect-mongo": "^5.1.0",
"cookie-parser": "^1.4.6",
"dropzone": "^6.0.0-beta.2",
"ejs": "^3.1.10",
"express": "^4.19.2",
"express-session": "^1.18.0",
"file-saver": "^2.0.5",
"gridfs-stream": "^1.1.1",
"jquery": "^3.7.1",
"jsdom": "^24.1.1",
"jszip": "^3.10.1",
"jszip-utils": "^0.1.0",
"libxmljs": "^1.0.11",
"lodash": "^4.17.21",
"mongo-connect": "^0.0.6",
"mongoose": "^8.5.3",
"morgan": "^1.10.0",
"multer": "^1.4.5-lts.1",
"nodemailer": "^6.9.14",
"nodemailer-mailgun-transport": "^2.1.5",
"openseadragon": "^5.0.0",
"passport": "^0.7.0",
"passport-facebook": "^3.0.0",
"passport-google-oauth": "^2.0.0",
"passport-local": "^1.0.0",
"passport-twitter": "^1.0.4",
"promise-defer": "^1.0.0",
"require-in-the-middle": "^7.4.0",
"serve-favicon": "^2.5.0",
"sort-array": "^4.1.5",
"urijs": "^1.19.11"
},
"devDependencies": {
"css-loader": "^7.1.2",
"jasmine": "^5.2.0",
"less": "^4.2.0",
"less-loader": "^12.2.0",
"mini-css-extract-plugin": "^2.9.1",
"style-loader": "^4.0.0",
"webpack": "^5.94.0"
}
}
And here is the webpack.js file which creates the bundle for the browser:
var _ = require('lodash')
, webpack = require('webpack')
, ResolverPlugin = webpack.ResolverPlugin
, ProvidePlugin = webpack.ProvidePlugin
, IgnorePlugin = webpack.IgnorePlugin
// , ExtractTextPlugin = require("extract-text-webpack-plugin")
, path = require('path')
, clientRoot = path.resolve(__dirname)
, bowerRoot = path.resolve(clientRoot, '..', 'bower_components')
, nodeRoot = path.resolve(clientRoot, '..', 'node_modules')
, devtool = 'eval-source-map'
, debug = true
;
switch (process.env.NODE_ENV) {
case 'production':
devtool = '#source-map';
debug = false;
break;
case 'development':
devtool = 'eval-source-map';
debug = true;
break;
}
var config = {
context: clientRoot,
mode: "development",
entry: {
app: path.join(clientRoot, 'app/boot.js'),
t: path.join(clientRoot, 'app/t.js'),
},
output: {
path: path.join(clientRoot, 'dist'),
filename: '[name].bundle.js',
devtoolModuleFilenameTemplate(info) {
return `file:///${info.absoluteResourcePath.replace(/\/g, '/')}`;
},
},
externals: {
jquery: 'jQuery',
rxjs: 'Rx',
lodash: '_',
bson: 'bson',
'codemirror/lib/codemirror': 'CodeMirror',
'codemirror/mode/xml/xml': false,
},
module: {
rules: [
{
test: /.png(?v=d+.d+.d+)?$/,
use: "url?limit=1000&minetype=image/jpg&prefix=dist/"
}, {
test: /.jpg(?v=d+.d+.d+)?$/,
use: "url?limit=1000&minetype=image/jpg&prefix=dist/"
}, {
test: /.woff(?v=d+.d+.d+)?$/,
use: "url?limit=1000&minetype=application/font-woff&prefix=dist/"
}, {
test: /.woff2(?v=d+.d+.d+)?$/,
use: "url?limit=1000&minetype=application/font-woff&prefix=dist/"
}, {
test: /.ttf(?v=d+.d+.d+)?$/,
use: "url?limit=1000&minetype=application/octet-stream&prefix=dist/"
}, {
test: /.eot(?v=d+.d+.d+)?$/,
use: "url?limit=1000&minetype=application/vnd.ms-fontobject&prefix=dist/"
}, {
test: /.svg(?v=d+.d+.d+)?$/,
use: "url?limit=1000&minetype=image/svg+xml&prefix=dist/"
},
{
test: /.css$/,
use:["style-loader", "css-loader"]
//loader: 'style!css'
},
{
test: /.less$/,
use: [
"style-loader",
"css-loader",
{
loader: "less-loader",
options: {
lessOptions: {
// javascriptEnabled: true,
},
},
},
],
},
], /*,
noParse: [
] */
},
resolve: {
/* root: [clientRoot], */
modules: [clientRoot, 'web_modules', 'node_modules', 'bower_components', ],
fallback: {
"fs": false,
"tls": false,
"net": false,
"path": false,
"zlib": false,
"http": false,
"https": false,
"stream": false,
"crypto": false,
"crypto-browserify": false, //if you want to use this module also don't forget npm i crypto-browserify
},
alias: {
bower: bowerRoot,
node: nodeRoot,
},
},
plugins: [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify(process.env.NODE_ENV),
},
}),
new webpack.LoaderOptionsPlugin({
debug: true
}),
],
devtool: devtool,
};
var compiler = webpack(config);
if (process.env.NODE_ENV === 'development') {
compiler.watch({
aggregateTimeout: 300,
poll: 1000,
}, handleError);
} else {
compiler.watch({
aggregateTimeout: 300,
poll: 1000,
}, handleError);
//compiler.run(handleError);
}
function handleError(err, stats) {
console.log(JSON.stringify({
colors: true,
cached: false,
}));
}
I am running node 20.17.0.