node.js - nodejs - Problemas para comenzar con el paquete web 4

npm

Question

Estoy siguiendo el tutorial exactamente como se da here . Pero me sorprende que los documentos parezcan obsoletos. p.ej

npx webpack src/index.js dist/bundle.js falla con:

El CLI se mudó a un paquete separado: webpack-cli. Instale ''webpack-cli'' además del propio webpack para usar la CLI. -> Cuando use npm: npm instale webpack-cli -D -> Cuando use hilados: hilados agregue webpack-cli -D

Si instalo webpack-cli y vuelvo a intentarlo, veo este error:

Hash: af9bc06fd641eb0ffd1e Versión: webpack 4.0.0 Tiempo: 3865ms Construido en: 2018-2-26 05:10:45 1 activo Entrypoint main = main.js here (webpack) /buildin/module.js 519 bytes {0} [construido ] 2 (paquete web) /buildin/global.js 509 bytes {0} [built] [3] ./src/index.js 212 bytes {0} [built] [4] multi ./src/index.js dist / bundle.js 40 bytes {0} [construido] + 1 módulo oculto

ADVERTENCIA en la configuración La opción ''modo'' no se ha configurado. Establezca la opción ''modo'' en ''desarrollo'' o ''producción'' para habilitar los valores predeterminados para este entorno.

ERROR en multi ./src/index.js dist / bundle.js Módulo no encontrado: Error: No se puede resolver ''dist / bundle.js'' en ''/ var / app / webpack_demo'' @ multi ./src/index.js dist / bundle.js

Espero no estar haciendo una locura, dada la popularidad del paquete web, la documentación debe reflejar el comportamiento real. Avísame si estoy haciendo algo mal.

Editar

Una descripción detallada de la actualización a 2 , que podría ser útil

Answer 1

Los documentos de Webpack 4 no están listos todavía. Recientemente migré del paquete web 3 al 4 y me tomó bastante tiempo resolver todos los problemas.

Aquí hay un ejemplo de mi repositorio que puede usar como referencia para migrar del paquete web 3 al 4.

https://github.com/flexdinesh/react-redux-boilerplate

Hay un compromiso específico para la migración. Echa un vistazo a eso para más información.

Answer 2

Puede pasar el mode param en el comando webpack config o cli.

Config: mode: ''development'' o mode: ''production''

CLI: webpack --mode development o webpack --mode production

Answer 3

Se resolvió el mismo problema y, después de un poco de investigación, se encontró un problema que se solucionó, como se puede ver en este hilo de Github.

Una de las opciones:

Inside package.json establece los scripts en modo de development o production .

"scripts": {
  "dev": "webpack --mode development",
  "build": "webpack --mode production"
}

Y ahora, cuando npm run dev , te dará bundle.js pero no se reducirá .

Pero cuando npm run build , obtendrás un paquete minificado

Answer 4

Será actualizado muy pronto, vea este enlace para información.

¡Estamos muy cerca de tener la Guía de Migración y v4 Docs Additions completos! Para rastrear el progreso, o dar una mano, por favor, visite nuestro repositorio de documentación, revise la próxima sucursal y ¡ayude!

Answer 5

El equipo de Webpack está trabajando en actualizar los documentos del paquete lo antes posible. Las nuevas guías y documentos están disponibles en el sitio oficial webpack.js.org .

Mientras tanto, también puedes leer publicaciones relacionadas en el medio:

• webpack 4: modo y optimización
• webpack 4: lanzado hoy !!

Compruebe en GitHub este proyecto webpack-4-demo que pretende ser un tutorial de Webpack 4 . Los enlaces anteriores y otros a recursos útiles utilizados en las configuraciones de paquetes web se incluyen en el Readme del proyecto. Tiene dos compilaciones de configuración cero (usando la nueva opción de mode paquete web que incluye un conjunto de valores predeterminados) y otras dos utilizando configuraciones personalizadas.

Desde webpack-4 , la CLI se ha movido a webpack-cli por lo que necesita instalar también este paquete en sus devDependencies . Además, el webpack espera que la nueva configuración de mode se establezca en la ejecución de la CLI o en el objeto de configuración.

Uso de CLI en sus scripts npm :

"scripts": {
    "dev": "webpack --mode development",
    "prod": "webpack --mode production"
}

Establezca la propiedad de mode en su objeto de configuración webpack:

{
    mode: ''production'' // | ''development'' | ''none''
}

Si no se especifica el valor del modo, el paquete web utiliza el valor de production (opción predeterminada). Pero te advierte en la salida con:

ADVERTENCIA en la configuración

La opción ''modo'' no se ha configurado. Establezca la opción ''modo'' en ''desarrollo'' o ''producción'' para habilitar los valores predeterminados para este entorno.

El mode paquete web reduce la configuración requerida para una construcción útil utilizando un conjunto de valores predeterminados (valores predeterminados para las propiedades de configuración según el valor de mode ):

• production permite todo tipo de optimizaciones para generar paquetes optimizados.
• development permite mensajes de error útiles y está optimizado para la velocidad.
• none es un modo oculto que desactiva todo.

Lea más sobre las notas de lanzamiento y el registro de cambios