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
|
1 2 3 4 5 6 7 8 9 10 11 |
mkdir webpack-example && cd webpack-example mkdir src mkdir dist npm init -y npm i webpack webpack-cli webpack-dev-server html-webpack-plugin npm i @babel/core @babel/preset-env @babel/preset-react babel-loader npm i react react-dom touch webpack.config.js touch ./src/index.js touch .babelrc |
Lets edit .bablerc file so we can compile react
|
1 2 |
{"presets":["@babel/env", "@babel/react"]} |
Now, lets edit our package.json and add a new line in our scripts section:
|
1 2 3 4 |
"scripts": { "watch": "webpack-dev-server --config webpack.config.js" }, |
Now we need to configure webpack.
Open up webpack.config.js in your editor, and use these configurations:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: './src/index.js', mode: 'development', watch: true, output: { filename: 'main.js', path: path.resolve(__dirname, 'dist') }, module:{ rules:[{ test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader', }] }, plugins: [ new HtmlWebpackPlugin({ title: 'Development' }) ], devtool: 'inline-source-map', devServer: { contentBase: path.join(__dirname, 'dist') } }; |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
import ReactDOM from 'react-dom'; import React from 'react'; const body = document.querySelector('body'); const appNode = document.createElement("div"); appNode.setAttribute('id', 'app'); body.appendChild(appNode); class DevmonComponent extends React.Component { render() { return ( <div> Hello React, Runs from devmon </div> ); } } ReactDOM.render( <DevmonComponent />, appNode ); |
since webpack-dev-server has auto-reload, you should see now in your browser
Hello React, Runs from devmon
Thats it, have fun coding 🙂
