Odtnhj

I am using webpack 4 to generate app.js and app.min.js files from index.js and i am using app.min.js script in HTML. I am not using webpack.config.js file for this. I am using scripts.

My package.json scripts are these:

"build:dev": "webpack --mode development --module-bind js=babel-loader ./src/index.js --output ./dist/scripts/app.js",
"build:prod": "webpack --mode production --module-bind js=babel-loader ./src/index.js --output ./dist/scripts/app.min.js", 
"build:process": "npm-run-all build:dev build:prod"

And I have .babelrc file that contains following:

 "presets": [
 "@babel/preset-env"
 ]

I am not sure my script is using babel-core or @babel/preset-env or @babel/core or babel-core or babel-preset-env but I have these in my dependencies list.

My dependencies are below:

 "dependencies": 
 "babel-polyfill": "^6.26.0"
 ,
 "devDependencies": 
 "@babel/core": "^7.1.5",
 "@babel/preset-env": "^7.1.5",
 "autoprefixer": "^9.3.1",
 "babel-cli": "^6.26.0",
 "babel-core": "^6.26.3",
 "babel-loader": "^8.0.4",
 "babel-minify-webpack-plugin": "^0.3.1",
 "babel-preset-env": "^1.7.0",
 "babel-register": "^6.26.0",
 "body-parser": "^1.18.3",
 "browser-sync": "^2.26.3",
 "compression": "^1.7.3",
 "cross-env": "^5.2.0",
 "css-loader": "^1.0.1",
 "csv-loader": "^3.0.2",
 "eslint": "^5.9.0",
 "eslint-loader": "^2.1.1",
 "eslint-plugin-import": "^2.14.0",
 "express": "^4.16.4",
 "extract-text-webpack-plugin": "^3.0.2",
 "file-loader": "^2.0.0",
 "html-webpack-plugin": "^3.2.0",
 "jsdom": "^13.0.0",
 "localtunnel": "^1.9.1",
 "mini-css-extract-plugin": "^0.4.4",
 "node-sass": "^4.10.0",
 "nodemon": "^1.18.6",
 "npm-run-all": "^4.1.3",
 "postcss-cli": "^6.0.1",
 "postcss-loader": "^3.0.0",
 "sass-loader": "^7.1.0",
 "style-loader": "^0.23.1",
 "uglify-js": "^3.4.9",
 "uglifyjs-folder": "^1.5.1",
 "uglifyjs-webpack-plugin": "^2.0.1",
 "url-loader": "^1.1.2",
 "webpack": "^4.25.1",
 "webpack-cli": "^3.1.2",
 "webpack-dev-middleware": "^3.4.0",
 "webpack-dev-server": "^3.1.10",
 "webpack-hot-middleware": "^2.24.3",
 "xml-loader": "^1.2.1"
 

I am generating app.js and app.min.js from index.js
The files are being generated and if i change code in index.js it gets updated in output files but in html page where I have called it like

<script src="assets/scripts/app.min.js"></script>

Its not getting updated and is loading old code. I am looking at same code output after every new production build even though its being changed in the app.min.js on every build run.

If I use these scripts:

"build:dev": "webpack --mode development"
"build:prod": "webpack --mode production"

Than main.js is generated and if i call that main.js in html it reflects changes on each build request.

Its a simple JS environment - no framework - I am using Yarn. I have tried deleting app.js and app.min.js files. I have run 'yarn upgraded' and 'yarn clean' and 'yarn audit fix' but same result.

So why i am unable to see changes in app.min.js on each build if i try to change entry and output points? And I am not using any server or localhost. just opening index.html that has the app.min.js included.

The script url is here, in case anybody wants to have a look at whole script:
https://github.com/techmynd/Webpack/tree/master/0-webpack-4/via-scripts