Webpack 5 webpack-dev-server cannot find module



by Braulio Diez


by Braulio Diez

Introducción

Si estás en el proceso de migrar de Webpack 4 a 5 te vas a encontrar con algunos “breaking changes”.

Uno de los primero que te puede dar un susto es la forma en que tienes que lanzar webpack-dev-server desde tu package.json

TL;DR;

Si queremos lanzar webpack-dev-server en webpack 5, tenemos que:

instalarlo:

npm i webpack-dev-server -D

Y en vez de ejecutarlo con el comando webpack-dev-server mode=development hacer lo de la siguiente manera

package.json

  "scripts": {
    "start": "webpack serve --mode=development",

Paso a paso

Veamos como funciona esto creando un proyecto mínimo:

npm init -y

instalamos webpack y webpack-dev-server

npm i webpack webpack-cli webpack-dev-server -D

Vamos a añadir un fichero HTML de prueba en la carpeta raíz

./index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Webpack by sample</title>
  </head>
  <body>
    Hello Webpack !
  </body>
</html>

Y para seguir la convención creamos una carpeta llamada src y debajo metemos el siguiente fichero de prueba

./src/index.js

console.log("Hello from webpack !");

Vamos añadir en el package.json, el comando para arrancar nuestro servidor web

"scripts": {
    "start": "webpack serve --mode=development"
},

Si ahora ejecutamos desde la línea de comando npm start podemos ver como levanta el servidor.

npm start

Ya sólo tenemos que abrir el navegador y navegar a la dirección http://localhost:8080

app.png

¿ Qué pasaría si directamente invocamos al comando antiguo para ejecutar webpack-dev-server? Nos saldría por console el siguiente error:

internal/modules/cjs/loader.js:800
    throw err;
    ^

Error: Cannot find module 'webpack-cli/bin/config-yargs'

'MODULE_NOT_FOUND'

¿ Y si no tenemos wepback-dev-server instalado y ejecutamos webpack-serve? nos saldría un mensaje indicando que instalemos webpack-dev-server

[webpack-cli] You need to install 'webpack-dev-server' for running 'webpack serve'.
Error: Cannot find module 'webpack-dev-server'

Puedes encontrar el código fuente de esta demo pinchando en este enlace.

Si estás buscando ejemplo más elaborados con webpack, chequea nuestra guía.

¿Con ganas de aprender desarrollo Front End?

Si tienes ganas de ponerte al día en el mundo del Front End impartimos un máster online con clases en vivo, más información: http://lemoncode.net/master-frontend