Webpack crear un servidor local
Seguimos con la guia de Webpack, en este articulo aprenderemos a configurar nuestro entorno de desarrollo con webpack para poder crear un servidor local y poder correr nuestra aplicación sin ningun problema, realmente es muy sencillo hacerlo, pongamos manos a la obra.
Webpack dev server
Si seguiste la guia, notaras que cada vez que realices un cambio en el cóidgo debes de jecutar el comando.-
1
$ npm run dev
Pero esto no es lo ideal, lo mejor seria que aparte de poder visualizar su aplicación en el navegador, tambien puedas recompilar todo tu código cuendo realices cambios en el de forma automatica.
Vamos hacer uso de la dependencia webpack-dev-server, así que la instalamos.-
1
$ npm install -D webpack-dev-server
Y configuramos su uso en los scripts del archivo “package.json” quedando de la siguiente forma.-
1
2
3
4
5
6
...
"scripts": {
"dev": "webpack-dev-server --mode development --open",
"build": "webpack --mode production"
}
...
Ahora solo guardamos los cambios y vamos a ejecutar nuestro servidor.-
1
$ npm run dev
Y veremos un mensaje en la consola que nos muestra información sobre el servidor de pruebas.-
1
2
3
4
5
6
7
8
9
> webpack-for-react@1.0.0 dev /home/codeando/github/webpack-for-react
> webpack-dev-server --mode development --open
ℹ ｢wds｣: Project is running at http://localhost:8080/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wdm｣: Hash: 8eec1d3fad2740addc7c
Version: webpack 4.29.0
Time: 7692ms
...
Nuestra aplicación la podemos visualizar desde la url.-
Conclusiones
Con esto finalizamos nuestra guia de webpack, pero agregare un par de articulos interesantes para darle una configuración mas robusta, te recomiendo ahora empezar con el curso basico de React para que puedas seguir con esta curva de aprendizaje.
Que tengan feliz código.