webpack es un agrupador de módulos. Su propósito principal es agrupar archivos JavaScript para su uso en un navegador, pero también es capaz de transformar, agrupar o empaquetar casi cualquier recurso o activo.
- Tabla de contenidos
- Instalar
- Introducción
- Cómo empezar
- Compatibilidad con navegadores
- Conceptos
- Plugins
- Cargadores
- Ficheros
- JSON
- Transpilando
- Plantillas
- Styling
- Frameworks
- Rendimiento
- Formatos de módulos
- División del código
- Optimizaciones
- Contribuyendo
- Creando tus propios plugins y loaders
- Soporte
- Licencia
- Equipo del núcleo
- Patrocinador
- Socios Premium
- Otros Backers y Patrocinadores
- Patrocinadores de Oro
- Patrocinadores de plata
- Patrocinadores de bronce
- Respaldadores
- Agradecimientos especiales a
Tabla de contenidos
- Instalación
- Introducción
- Conceptos
- Contribución
- Soporte
- Equipo principal
- Patrocinio
- Premio Partners
- Otros Backers y Patrocinadores
- Patrocinadores Oro
- Patrocinadores Plata
- Patrocinadores Bronce
- Backers
- Gracias especiales
Instalar
Instalar con npm:
npm install --save-dev webpack
Instalar con yarn:
yarn add webpack --dev
Introducción
webpack es un bundler para módulos. El propósito principal es agrupar archivos JavaScript para su uso en un navegador, pero también es capaz de transformar, agrupar o empaquetar casi cualquier recurso o activo.
TL;DR
- Bundles ES Modules, CommonJS, y módulos AMD (incluso combinados).
- Puede crear un único bundle o múltiples chunks que se cargan de forma asíncrona en tiempo de ejecución (para reducir el tiempo de carga inicial).
- Las dependencias se resuelven durante la compilación, reduciendo el tamaño en tiempo de ejecución.
- Los cargadores pueden preprocesar los archivos durante la compilación, por ejemplo, TypeScript a JavaScript, cadenas de Handlebars a funciones compiladas, imágenes a Base64, etc.
- Sistema de plugins altamente modular para hacer cualquier otra cosa que su aplicación requiera.
Cómo empezar
Consulta la guía rápida de cómo empezar de webpack y las otras guías.
webpack soporta todos los navegadores que son compatibles con ES5 (IE8 e inferiores no son compatibles).webpack también necesita Promise para import() y require.ensure(). Si quieres soportar navegadores más antiguos, necesitarás cargar un polyfill antes de usar estas expresiones.
Conceptos
Plugins
webpack tiene una rica interfaz de plugins. La mayoría de las funcionalidadesdentro de webpack utilizan esta interfaz de plugins. Esto hace que webpack sea muy flexible.
| Nombre | Estado | Tamaño de la instalación | Descripción |
|---|---|---|---|
| mini-css-extract-plugin | Extrae el CSS en archivos separados. Crea un archivo CSS por cada archivo JS que contenga CSS. | ||
| compression-webpack-plugin | Prepara versiones comprimidas de activos para servirlos con Content-Encoding | ||
| html-webpack-plugin | Simplifica la creación de archivos HTML (index.html) para servir sus paquetes |
Cargadores
webpack permite el uso de cargadores para preprocesar archivos. Esto le permite bundleany recurso estático mucho más allá de JavaScript. Puedes escribir fácilmente tus propios cargadores utilizando Node.js.
Los cargadores se activan utilizando prefijos loadername! en declaraciones require(), o se aplican automáticamente a través de regex desde tu configuración de webpack.
Ficheros
| Nombre | Estado | Tamaño de la instalación | Descripción |
|---|---|---|---|
| Rojo-loader | Carga el contenido raw de un archivo (utf-8) | ||
| val-loader | Ejecuta el código como módulo y considera las exportaciones como código JS | ||
| url-loader | Funciona como el cargador de archivos, pero puede devolver una Url de datos si el archivo es más pequeño que un límite | ||
| file-loader | Emite el archivo en la carpeta de salida y devuelve la url (relativa) |
JSON
| Nombre | Estado | Tamaño de la instalación | Descripción |
|---|---|---|---|
| Carga y transpila un archivo CSON |
Transpilando
| Nombre | Estado | Tamaño de la instalación | Descripción |
|---|---|---|---|
| Carga el código ES2015+ y transpila a ES5 usando Babel | |||
| Carga el código ES2015+ y transpila a ES5 utilizando Traceur | |||
| Carga TypeScript como JavaScript | |||
| Carga CoffeeScript como JavaScript |
Plantillas
| Nombre | Estado | Tamaño de la instalación | Descripción |
|---|---|---|---|
| Exporta HTML como cadena, requiere referencias a recursos estáticos | |||
| Carga las plantillas Pug y devuelve una función | |||
| Compila Markdown a HTML | |||
| Carga y transforma un archivo HTML utilizando PostHTML | |||
| Compila Handlebars a HTML |
Styling
| Name | Estado | Tamaño de la instalación | Descripción |
|---|---|---|---|
<style> |
Añadir exportaciones de un módulo como estilo al DOM | ||
| Carga el archivo CSS con las importaciones resueltas y devuelve el código CSS | |||
| Carga y compila un archivo LESS | |||
| Carga y compila un archivo Sass/SCSS | |||
| Carga y compila un archivo Stylus | |||
| Carga y transforma un archivo CSS/SSS utilizando PostCSS |
Frameworks
| Nombre | Estado | Tamaño de la instalación | Descripción |
|---|---|---|---|
| Carga y compila Vue Components | |||
Procesar HTML &CSS con el preprocesador de elección y require()Componentes Web como módulos de primera clase |
|||
| Carga y compila Angular 2 Components | |||
| Cargador oficial de webpack |
Rendimiento
webpack utiliza I/O asíncrono y tiene múltiples niveles de caché. Esto hace que webpack sea rápido e increíblemente rápido en compilaciones incrementales.
Formatos de módulos
webpack soporta módulos ES2015+, CommonJS y AMD fuera de la caja. Realiza un análisis estático inteligente en el AST de su código. Incluso tiene un motor de evaluación para evaluar expresiones simples. Esto le permite soportar la mayoría de las bibliotecas existentes fuera de la caja.
División del código
webpack le permite dividir su base de código en múltiples trozos. Los trozos se cargan de forma asíncrona en tiempo de ejecución. Esto reduce el tiempo de carga inicial.
Optimizaciones
webpack puede hacer muchas optimizaciones para reducir el tamaño de salida de suJavaScript desduplicando los módulos usados frecuentemente, minificando, y dándole control total de lo que se carga inicialmente y lo que se carga en tiempo de ejecución a través de la división de código. También puede hacer que tus trozos de código sean amigables con la caché mediante el uso de hashes.
Contribuyendo
Queremos que contribuir a webpack sea divertido, agradable y educativo para cualquiera y para todos. Tenemos un ecosistema vibrante que se extiende más allá de este único repo. Te invitamos a visitar cualquiera de los repositorios de nuestra organización o la organización webpack-contrib que alberga todos nuestros cargadores y plugins.
Las contribuciones van mucho más allá de los pull requests y commits. Aunque nos encanta darte la oportunidad de poner tu sello en webpack, también estamos encantados de recibir una variedad de otras contribuciones incluyendo:
- Actualizaciones de la documentación, mejoras, diseños o correcciones de errores
- Correcciones ortográficas o gramaticales
- README.md correcciones o rediseños
- Añadir pruebas unitarias, o funcionales
- Revisar los problemas de GitHub — especialmente determinar si un problema aún persiste o es reproducible.
- ¡Buscar #webpack en twitter y ayudar a alguien más que necesita ayuda
- Enseñar a otros cómo contribuir a uno de los muchos repos de webpack!
- Hacer un blog, hablar o crear tutoriales sobre una de las muchas características de webpack.
- Ayudar a otros en nuestro canal de gitter de webpack.
Para empezar echa un vistazo a nuestra documentación sobre cómo contribuir.
Si estás preocupado o no sabes por dónde empezar, siempre puedes ponerte en contacto con Sean Larkin (@TheLarkInn) en Twitter o simplemente enviar un problema y un mantenedor puede ayudarte a orientarte.
También hemos comenzado una serie en nuestra publicación en Medium llamada The Contributor’s Guide to webpack. Te invitamos a leerla y a publicar cualquier pregunta o respuesta si todavía necesitas ayuda.
¿Quieres hablar sobre webpack? ¡Nos encantaría revisar el resumen de tu charla/CFP! Puedes enviarlo por correo electrónico a webpack opencollective com y podemos dar indicaciones o consejos!!!
Creando tus propios plugins y loaders
Si creas un loader o plugin, nos gustaría <3 que lo abrieras en código abierto, y lo pusieras en npm. Seguimos la convención de nomenclatura x-loader, x-webpack-plugin.
Soporte
Consideramos que webpack es una herramienta de bajo nivel que se utiliza no sólo individualmente, sino también en capas debajo de otras herramientas impresionantes. Debido a su flexibilidad, webpack no es siempre la solución de nivel de entrada más fácil, sin embargo creemos que es la más poderosa. Dicho esto, siempre estamos buscando maneras de mejorar y simplificar la herramienta sin comprometer la funcionalidad. Si tienes alguna idea sobre cómo conseguirlo, somos todo oídos
Si estás empezando, echa un vistazo a nuestra nueva página de documentos y conceptos. Esto tiene una visión general de alto nivel que es grande para los principiantes!
Buscando docs webpack 1? Por favor, echa un vistazo a la antigua wiki, pero ten en cuenta que esta versión obsoleta ya no está soportada.
Si quieres discutir algo o simplemente necesitas ayuda, aquí está nuestra sala de Gitter donde siempre hay personas que quieren ayudar.
Si todavía tienes dificultades, nos encantaría que publicaras una pregunta en StackOverflow con la etiqueta webpack. Es mucho más fácil responder a las preguntas que incluyen tu webpack.config.js y los archivos relevantes. Así que si puedes proporcionarlos, estaríamos extremadamente agradecidos (¡y es más probable que te ayudemos a encontrar la respuesta!)
Si eres conocedor de Twitter puedes tuitear #webpack con tu pregunta y alguien debería ser capaz de llegar y ayudar también.
Si has descubierto un 🐜 o tienes una sugerencia de característica, no dudes en crear un problema en Github.
Licencia
Equipo del núcleo
 Tobias Koppers Core Fundador de webpack |
 Johannes Ewald Loaders & Plugins Primero en adoptar webpack |
 Sean T. Larkin Relaciones públicas Fundador del equipo central |
 Kees Kluskens Desarrollo Patrocinador |
Patrocinador
La mayoría de los miembros del equipo central, los colaboradores de webpack y los colaboradores del ecosistema hacen este trabajo de código abierto en su tiempo libre. Si usas webpack para una tarea seria, y te gustaría que invirtiéramos más tiempo en ello, por favor dona. Este proyecto aumenta tus ingresos/productividad también. Hace que el desarrollo y las aplicaciones sean más rápidos y reduce el ancho de banda necesario.
Así es como utilizamos las donaciones:
- Permitir al equipo del núcleo trabajar en webpack
- Agradecer a los contribuyentes si invirtieron una gran cantidad de tiempo en contribuir
- Apoyar proyectos en el ecosistema que son de gran valor para los usuarios
- Apoyar proyectos que son más votados (work in progress)
- Coste de la infraestructura
- Cuotas por manejo de dinero
Socios Premium
Otros Backers y Patrocinadores
Antes de empezar a usar OpenCollective, las donaciones se hacían de forma anónima. Ahora que hemos hecho el cambio, nos gustaría reconocer a estos patrocinadores (y a los que siguen donando usando OpenCollective). Si hemos omitido a alguien, por favor envíanos un PR, y te añadiremos a esta lista.
Patrocinadores de Oro
Conviértete en un patrocinador de oro y obtén tu logo en nuestro README en Github con un enlace a tu sitio.
Patrocinadores de plata
Conviértete en patrocinador de plata y obtén tu logo en nuestro README en Github con un enlace a tu sitio.
Patrocinadores de bronce
Conviértase en un patrocinador de bronce y obtenga su logotipo en nuestro README en Github con un enlace a su sitio.
Respaldadores
Conviértete en un respaldador y obtén tu imagen en nuestro README en Github con un enlace a tu sitio.
Agradecimientos especiales a
(En orden cronológico)
- @google por Google Web Toolkit (GWT), cuyo objetivo es compilar Java a JavaScript. Cuenta con un Code Splitting similar al de webpack.
- @medikoo para modules-webmake, que es un proyecto similar. webpack nació porque quería Code Splitting para modules-webmake. Curiosamente el tema de Code Splitting sigue abierto (gracias también a @Phoscur por la discusión).
- @substack por browserify, que es un proyecto similar y fuente de muchas ideas.
- @jrburke por require.js, que es un proyecto similar y fuente de muchas ideas.
- @defunctzombie por la especificación browser-field, que hace que los módulos estén disponibles para node.js, browserify y webpack.
- Todos los primeros usuarios de webpack, que contribuyeron a webpack escribiendo issues o PRs. Has influido en la dirección…
- @shama, @jhnns y @sokra por mantener este proyecto
- Todos los que han escrito un cargador para webpack. Vosotros sois el ecosistema…
- Todos los que he olvidado mencionar aquí, pero que también han influido en webpack.