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

Question

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?

Yes, sir @aamirl! Please check it in here [link](https://ibb.co/ThTXYb7). It is my folder structure. The things in the ReactApp are the same with the article I mentioned above. The only difference would be the "plugins" of webpack.config.js. And I am not using CRA. I just followed that article, so probably npm install. — Kyi Zin, Feb 27 '20 at 01:05
I do not have a microphone and webcam since I am using it on my PC. But thank you for your help, sir. — Kyi Zin, Feb 27 '20 at 01:13
Sorry, but I am not a God to write hundreds of lines of codes without a single error. @Goran_Ilic_Ilke — Kyi Zin, Feb 29 '20 at 13:39

score 21 · Accepted Answer · answered Feb 29 '20 at 13:23

21

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"

answered Feb 29 '20 at 13:23

Kyi Zin

553
1
3
12

Thanks; this worked for me. However, it's slower than I anticipated. I wonder if https://stackoverflow.com/a/42773333/470749 would be faster, but I couldn't get `npm-watch` to work with this demo app: https://github.com/reduxjs/redux/tree/master/examples/todos – Ryan Apr 09 '20 at 22:32
Why not use the [webpack-dev-server](https://webpack.js.org/configuration/dev-server/)? – Jay Ghosh Jun 19 '20 at 14:40

score 3 · Answer 2 · answered Sep 14 '21 at 10:15

3

Use this command:

tsc src/index.ts --watch --outDir ./lib

ref: https://www.youtube.com/watch?v=F6aHIh5NglQ

answered Sep 14 '21 at 10:15

J.K.

126
5

1

This should be the real solution. Somehow npm watch was using all of the memory on my computer, and it also doesn't support incremental compilation. – Jeffrey Russell May 20 '22 at 16:39

score 1 · Answer 3 · answered Feb 27 '20 at 01:07

1

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.

answered Feb 27 '20 at 01:07

Harish Dhami

867
1
6
10

It does not necessarily relate to my question as it only works for module changes, which, in my case, is not it. – Kyi Zin Feb 27 '20 at 01:27
Nope, Anything you change over code, build will rerun for that change. Is not it what you looking for? – Harish Dhami Feb 27 '20 at 01:32

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

3 Answers3