How to use webpack watch mode with devmon

How to use webpack watch mode with devmon

devmon Is a great tool to work with when using webpack.

we will give it a spin ride to see how we set it up, and how to use it.
For this example we will create a simple react application, and use webpack to bundle it.

Step 1: Setup the enviorment

Lets edit .bablerc file so we can compile react

Now, lets edit our package.json and add a new line in our scripts section:

Now we need to configure webpack.
Open up webpack.config.js in your editor, and use these configurations:

Step 2: Configure devmon

Now, that we have a server configured, we can lunch it via devmon.
To do so, start a new project:

Now choose the directory of your project, and we will click on the Edit Button

We should add a new process, that will spin up our dev-server:

In the process config, we will use those settings:

Process Name – Lets use devserver, it can be anything you want it to be.
Workdir – we will keep it .. it means – the work directory relative to the project file
Start – we will set it to Automatic – we want our dev server to start uppon a project start.
Is Deamon? – we will keep it off.
Command – here we will use the script that we defined before, npm run watch

Click on Save and start the project.

Step 3: Start Writing Code

now we have our devmon watching our code, and serving it via localhost:8080.
You can go to your browser, and direct it to there.

Let’s write our first react component.

open ./src/index.js

since webpack-dev-server has auto-reload, you should see now in your browser
Hello React, Runs from devmon

Thats it, have fun coding 🙂