如何用npm start重新编译bundle.js？代码修改无更新问题

Let's break this down step by step—first unpacking how npm start works, then solving that frustrating issue where your code changes aren't updating bundle.js.

How npm start Operates #

npm start is a built-in npm shortcut that looks directly at the scripts section of your package.json. When you run it, it executes exactly the command you've assigned to the start key—in your case, that's nodemon app.js.

Nodemon's job is simple: it watches for changes to your Node.js server files (like app.js) and automatically restarts the server when it detects updates. But here's the catch: it doesn't handle front-end code compilation at all. That's the job of webpack, which you've configured in your dev script.

Why Your Changes Aren't Reflected in bundle.js #

Right now, when you run npm start, you're only launching nodemon to watch your server. Your dev script uses webpack -d --watch—the --watch flag is what tells webpack to monitor your front-end source files and recompile bundle.js whenever you make changes. Since you aren't running that webpack watch process alongside nodemon, your updates never get packaged into bundle.js, so they don't show up in your app.

Solutions to Auto-Compile bundle.js with npm start #

You've got two solid options to fix this:

Option 1: Run Both Processes Simultaneously (Recommended) #

Use a tool like concurrently to run both nodemon and webpack's watch mode in a single terminal window. Here's how:

1. Install concurrently as a dev dependency:

   npm install concurrently --save-dev
   

2. Update your package.json scripts to run both commands at once:

   {
     "scripts": {
       "start": "concurrently \"nodemon app.js\" \"webpack -d --watch\"",
       "dev": "webpack -d --watch",
       "build": "webpack ..."
     }
   }
   

Now when you run npm start, it'll start both the nodemon server watcher and the webpack compiler watcher. Any changes to your server files will restart the server, and any front-end code changes will trigger a recompile of bundle.js.

Option 2: Use Separate Terminal Windows #

If you don't want to add an extra dependency, just open two terminal windows:

• In the first window, run npm start to launch your server with nodemon.
• In the second window, run npm run dev to start webpack's watch mode.
  This keeps both processes running independently, and you'll still get auto-restarts and auto-compilation.

Quick Recap #

Remember: npm start doesn't have any hidden magic—it just runs the command you define in your package.json. To get auto-compilation of bundle.js when you run it, you need to include the webpack watch process alongside nodemon, either with a tool like concurrently or by running the processes separately.

内容的提问来源于stack exchange，提问作者Brian Millot