Organiza tu código con Webpack

@deivijt

Quién no ha tenido su index.html así:

Continuará...

MODULARIZAR PARA:

1. Encapsular Código

2. Gestionar dependencias

SISTEMA DE MODULOS

CommonJS

AMD

• Carga asíncrona 

• Carga síncrona 

• Petición http para cada módulo

• Empaqueta en un solo archivo

• NPM modules

WEBPACK

• CommonJS y AMD

• Importar varios formatos de archivos

• Es altamente configurable

• Hot Module Replacement

• Hashing de archivos

• Code Splitting

CONCEPTOS FUNDAMENTALES

1. ENTRY

webpack.config.js

2. OUTPUT

webpack.config.js

3. LOADERS

webpack.config.js

4. PLUGINS

webpack.config.js

ALGO MAS QUE UN MODULE BUNDLER

WEBPACK DEV SERVER

webpack.config.js

CLI

CODE SPLITTING

NPM + WEBPACK

NPM + WEBPACK

https://github.com/deivijt/webpack2-example

EJEMPLO