Servidor de desarrollo local

Si te salio el error al hacer start
Si tienes una webpack-cli V4 o superior
webpack-dev-server ahora es webpack serve

  "scripts": {
    "build": "webpack --mode production",
    "start": "webpack serve"
  },

Para los que le genera un error de .babelrc. Dentro de este archivo debe poner lo siguiente:

{
    "presets": [
        "@babel/preset-env"
    ]
}

Hay que instalar svelte-loader:

npm install svelte-loader --save-dev

npm install webpack-dev-server --save-dev

Al ejecutar el comando: npm run build me salió un error y lo resolví creando el archivo .babelrc en la raíz del proyecto, el cual debe contener lo siguiente:
{
“presets”: [
"@babel/preset-env"
]
}

Al ejecutar el comando: npm run build. En este caso he modificado, en el archivo package.json la clave scripts dejándola de la siguiente manera:
“scripts”: {
“build”: “webpack --mode production”,
“start”: “webpack serve”
},

Estas soluciones las aportaron otras persona por este medio, sin embargo he puesto las que funcionaron para mí, en este aporte por si es el caso de alguien más.

Para los que aun no han tomado los cursos de Webpack:
Curso de WebPack
Curso practico de WebPack

Compañeros me pueden ayudar con el siguiente error:

Les comparto mi código de webpack.config.js donde creo entender que estaría el error:

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: "./src/index.js",
  outpud: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
  },
  resolve: {
    extensions: ["*", ".mjs", ".js", ".svelte"],
  },
  module: {
    rules: [
      {
        test: /\.js? $/,
        exclude: /node.modules/,
        use: {
          loader: "babel-loader",
        },
      },
      {
        test: /\.svelte$/,
        exclude: /node.modules/,
        use: {
          loader: "svelte-loader",
        },
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      inject: true,
      template: "./public/index.html",
      filename: "./index.html",
    }),
  ],
};

Desde la clase pasada agregue el archivo .babelrc y esto tengo instalado:

"devDependencies": {
    "@babel/core": "^7.10.5",
    "@babel/polyfill": "^7.10.4",
    "@babel/preset-env": "^7.10.4",
    "babel-loader": "^8.1.0",
    "html-webpack-plugin": "^4.3.0",
    "svelte-loader": "^2.13.6",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.0"
  }

Ayuda!!!

Cambiar en package.json por las siguientes versiones de webpack para evitar el siguiente Error: no se puede encontrar el módulo ‘webpack-cli / bin / config-yargs’

"webpack": "^4.32.2",
"webpack-cli": "^3.3.2",
"webpack-dev-server": "^3.5.1"

A veces estoy tan acostumbrado a user npm install y que todo se configure en automático, pero es genial aprender como funciona todo por detrás

npm install --save-dev webpack-dev-server

Este warning

WARNING: You should add "svelte" to the "resolve.conditionNames" array in your webpack config. See https://github.com/sveltejs/svelte-loader#resolveconditionnames for more information

se refiere a esta línea, para agregar en la configuración de webpack

    resolve: {
        extensions: ['*', '.mjs', '.js', '.svelte'],
        conditionNames: ['svelte']
    },

Recuerden añadir la carpeta de distribución “dist” a la lista de elementos ignorados por git en .gitignore

# compiled output
/dist

Si les sale algún error del tipo:

[webpack-cli] ReferenceError: globalThis is not defined

Significa que tienen una versión vieja de nodejs, ya que eso se implementó en la versión 12 de nodejs.
Se arregla actualizando nodejs a la última versión

Me sucedió algo extraño jaja, al abrir el proyecto con npm run start me apareció con el icono de Vue! xdd

Si alguien tiene problemas con la version que instalan de webpack usen:

    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.11.0"

Alguien sabe por que me sale este error?, me sale en todos lados no solo en este curso ya estoy odiando a webpack xd

Si quieren escribir una estructura básica de html escriban el simbolo de admiración “!” y den click en lo primero que sale.

¿Me pueden ayudar con este error?

Genial! Estoy muy ansioso 😃

Tengo este ERROR! Ya repeti los pasos 3 veces desde el inicio y nada! Alguien me podría ayudar?

Un gusto leer los comentarios, a cada uno nos faltó algo o le pifiamos en sintaxis jajaja.
En mi caso, en el webpack.config puse plugin en vez de plugins 😄

boby :v

👌

Si actualmente tienes problemas con webpack-cli te recomiendo borrar la versión actual con npm uninstall webpack-cli y luego instalar una estable (ejemplo, 3.3.11) con npm install [email protected].
¡Suerte!

Por si alguien tiene problemas para compilar, pruebe el comando

    "start": "webpack serve --open chrome"

y si tienen un problema con htmlWebpackPlugin, aquí hay info al respecto https://github.com/jantimon/html-webpack-plugin/issues/1451

npm install webpack-dev-server --save-dev

<npm install webpack-dev-server --save-dev>