Develop Reference

Do I need to run "npm run build" every time I made changes?

First of all, I am really new to NPM stuffs. But I do know React and PHP. So I have figured myself to create a CMS system using PHP as a backend and React as a frontend with the help of CDNs from Babel and React(And ofc axios to make data requests and sends). However, I do want to get into more proper way with webpack with the actual website. So, I have followed along the tutorial from this article. He has explained quite extraordinarily. However, he uses HTML whilst in my case, I have a PHP. So since I am not fully aware of what I am doing. I have redirected the HTMLWebPlugin to my PHP File in webpack.config.js.
plugins: [
new HtmlWebPackPlugin({
template: "./../index.php",
filename: "./index.php"
})
However, when I make changes the code and refreshes it, the webpage will not adapt to the changes unless I run "npm run build" for the next time. I do know I am running it from the built app. And this is because I am rather making changes on the entry files (index.js) when the webpage is rendering the output files (dist/main.js). But is this okay to connect these two and is there a way to automatically adapt to changes I make in the entry files?

So finally, I have found my solution. When you want to re-run "npm run build" every time a file changes. You need to install watch via npm. It checks all the files inside a directory and when you change something or on-save, it will re-run all the scripts inside package.json. So steps -
Install watch by "npm install watch"
When watch is installed, add "watch": "watch 'npm run build' ./directory-you-want-to-track"
Run "npm run watch"

Use this command:
tsc src/index.ts --watch --outDir ./lib
ref: https://www.youtube.com/watch?v=F6aHIh5NglQ

Yes, there is a way to solve this issue. You can use webpack's Hot Module Replacement feature. It's is just running webpack in development mode with proper set of config which you should find in webpack official documentation.

If you are using Vite Laravel plugin open package.json
install watch
npm install watch
and on scripts change it to
"build": "vite build --watch"
It should automatically update when you make changes

Update package.json in several places after "npm i"

I want to be able to detect any new package installed according to my package.json file, so when ever I do "npm i", it will automatically added to another section on my package.json file.
For example, if I do "npm i axios", It will update in 2 places on my package.json file:
on "dependencies" as usual, and on new section I created: "extDependencies".
Is there any way to detect any new installed packages?

Check this out: npm-scripts documentation
If you want to run a specific script at a specific lifecycle event for
ALL packages, then you can use a hook script.
Place an executable file at node_modules/.hooks/{eventname}, and it’ll
get run for all packages when they are going through that point in the
package lifecycle for any packages installed in that root.
Hook scripts are run exactly the same way as package.json scripts.
That is, they are in a separate child process, with the env described
above.
You could use this to create a postinstall script (bash, python, node.js, etc) that reads the npm_package_name and npm_package_version environment variables and then use those to update the package.json.

Can I modify a package from node_modules?

I use react-redux-snackbar I want to improved the style into this package, I modify the package from node_modules but nothing happens.
When modify node_modules into the folder of this plugin, I would like to mmodify the stylesheet but nothing happens.
Do you have any recommandations, like fork the project and create my own plugin ?

the approach I used for this was to keep a pre-built customised copy in my source tree, and then clobber the module version with it:
"scripts": {
"postinstall": "cp -r ./src/mycom/lib/tinymce/* ./node_modules/tinymce/",
this works after npm -i and in e.g. CI setups. I forked the repo for the lib (tinymce) that i was having trouble with, edited its source, and then built it.
i don't know the npm lib file/folder structure at all really but i copied the ./js folder content into my lib folder and from there into node_modules at install time and it seems to work.
don't forget to tell your linter to ignore your lib folder also e.g.
"lint": "eslint 'src/**/*.{js,jsx,ts,tsx}' --ignore-pattern 'src/mycom/lib' --quiet",
"lint:fix": "eslint 'src/**/*.{js,jsx,ts,tsx}' --ignore-pattern 'src/mycom/lib' --fix --quiet",

Yes, you can. Few options:
Submit a pull request on the project and wait for the author to
release it.
You can fork the project yourself on github and publish it.
Use a symlink by going to the source folder and using npm
link and then reference it in your project. Instructions.

If you want to update package in node_modules, you have to make your changes in project and you rebuild project in node_modules. The rebuild steps are probably in the Readme.md. But if you update project from npm install or other way, probably your project is gonna crash.

If you want some improvement in some dependency. This is the right time you can make a Pull Request to that repo. So it would be available to everyone using the same package. Most importantly if you're working in a team. We don't push node_modules in repo. Other members will download packages remotely so your changes will not be reflected there.
I hope you got my point.

Important thing you should know, whenever you are making change in node_modules folder, you need to rebuild your project to see its effect,
Now if you have modified node_modules and you restarted your server you will see changes
real issue will occur whenever in future you will try to do npm i it will automatically override your changes,
solution to this,
Fork project on your GitHub
Clone project on your system
Create two branches stable-verison & modified-version
Push your desired changes in modified-version branch
you will use stable-verison branch to sync latest changes from original repo
How you will use this modified-verion branch
there 2 ways,
Publish your branch as new package on npm
Use SHA commit hash to use directly in package.json
here is example for 2nd option
Open up your package.json file, and replace MODULE, USER, REPO, and SHA with the info from the GitHub repo.
"MODULE": "https://github.com/USER/REPO/commit/SHA",
in your case:
"react-redux-snackbar": "https://github.com/yourUser/react-redux-snackbar/commit/Your-Modified-Commit-SHA"
i hope this works for you

to update a package you nromally run something like npm install react-redux-snackbar#latest

Run webpack dev server while using angular cli serve script

I'm new to angular cli and webpack. In my project I have a webpack config file which among other configurations, it indicates that a merge file plugin (MergeJsonWebpackPlugin) should run for merging certain files and putting them on an output file somewhere else.
My problem is that when running webpack this is done, but those output files are stored somewhere in virtual memory. For what I've read, this is the normal behavior until you properly build you app for production in which case those outfile will be written in disk.
My app of course, tries to find those output files on the assets folder for using them inside the app itself. I've used another plugin (WriteFilePlugin) so as to been able to write the files in disk while running the webpack dev server, and this works great.
Now, For been able to handle this now I have a dedicated angular cli script in my package.json file
....
"scripts": {
"ng": "ng",
"start": "ng serve --port 9978",
"build": "ng build",
....
"custom": "webpack-dev-server --inline --progress --colors"
}
...
So, I have to run "npm custom" in order to have my files written in disk. Then I have to run "npm start" to serve my application and use those files. If for some reason I update my source files which should be merged, then I have to stop my start script and run the custom script for the webpack dev server all over again
Is there a way to include this automatically when running the start script via angular cli?
I've been reading that when you run "ng serve" what happens behind the scenes is:
Angular CLI loads its configuration from .angular-cli.json
Angular CLI runs Webpack to build and bundle all JavaScript and CSS code
Angular CLI starts Webpack dev server to preview the result on localhost:4200.
...because it includes LiveReload support, the process actively watches your src directory for file changes. When a file change is detected, step 2 is repeated and a notification is sent to your browser so it can refresh automatically.
On point 3 I would expect my merged files to be generated and store inside the assets folder but this is not happening (as it does when running "npm custom"), neither the update of this merged files whenever I update them.
Am I missing something? Would this be possible to do? Thanks in advance!

webpack custom command on watched files change

I'd like to be able to run a custom command when webpack detects that my files have changed. The command is to run a middleman build command that is based on rails, and not a simple js build/include.
How would I go about this?

You can use any application that is built on top of fsnotify library. From ruby world you can use guard or nodemon from Javascript world.
You'd want to watch your generated files.
Whenever any of the two files changes, it will execute the command.
nodemon --watch webpack.config.js --watch webpack.parts.js --exec \"webpack-dev-server --env development\"