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?

Answer 1

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 -

1. Install watch by "npm install watch"
2. When watch is installed, add "watch": "watch 'npm run build' ./directory-you-want-to-track"
3. Run "npm run watch"

Answer 2

Use this command:

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

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

Answer 3

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.