Tienes que ir paso a paso.
¿Qué es webpack?
Webpack es un paquete de módulos. No creo que esa definición sea muy útil, así que trato de describir lo que te ayuda a lograr:
- administra tus dependencias de aplicaciones de terceros. Por ejemplo, si instala bibliotecas con npm, puede usar Webpack para importar esos archivos usando una variedad de enfoques de módulos JavaScript (como AMD, CommonJS), más recientemente también la especificación oficial del módulo ES2015 (también conocido como ES6). Ver aquí: ES2015 – Jump Start
- Le permite hacer “división de código”, como dividir módulos JavaScript en diferentes archivos / paquetes para un mejor almacenamiento en caché o carga diferida.
- A través de complementos, le ayuda a minimizar sus archivos, concatenarlos para que estén listos para implementarse en producción (ya que desea minimizar sus archivos por razones de rendimiento)
- A través de complementos, también permite lograr otras cosas, como imágenes en línea o compilar SASS a CSS, etc.
Con todo, es como un corredor de tareas, que ya tiene una gran cantidad de complementos para usted, listos para usar y que resuelven la mayoría de los casos de uso que uno puede encontrar.
- ¿Puedo editar el código HTML con WordPress.com o tengo que alojarlo en otro sitio y usar WordPress.org?
- Cómo hacer que mi sitio web tenga autoridad en Google
- ¿Cuál es la mejor herramienta de prototipos / maquetas web?
- ¿Cuáles son las mejores recomendaciones sobre cómo comenzar a crear un tema de WordPress?
- Cómo recuperar y analizar texto JSON (dado en URL) a través de jQuery / JavaScript
¿Qué es BrowserSync?
BrowserSync es una herramienta que sincroniza sus archivos de código con uno o más navegadores. Al igual que si inicia una aplicación que está desarrollando y utiliza la sincronización de navegadores, mantendrá una conexión WebSocket a su servidor de desarrollo y cada vez que cambie un archivo, se actualizará en el navegador. Además, afaik, también puede conectar varios navegadores que se comportarán de la misma manera. Al igual que si te desplazas en una ventana, todas las demás también se desplazarán. Esto podría resultar bastante útil en las pruebas móviles.
¿Qué es la CLI angular?
Angular CLI es simplemente una interfaz de línea de comandos que agrupa algunas de las técnicas mencionadas anteriormente. Al igual que le ayuda a generar código, siguiendo las mejores prácticas de la guía de estilo oficial de Angular 2. Debajo del capó, usa Webpack, para exactamente lo que mencionamos anteriormente (minificar archivos, agruparlos, etc.). La diferencia es que no tiene que saber Webpack, cómo funciona y cómo debe configurarse y configurarse. La CLI lo hará por usted, obviamente dentro de los límites de la misma.
¿Cómo iría a implementar si no uso CLI?
Simplemente tendría que usar Webpack (o algún otro paquete de módulos + corredor de tareas) y escribir la configuración usted mismo. Eso está totalmente bien y hay un par de buenos entrantes:
- Uso de webpack: AngularClass / angular2-webpack-starter
- Usando SystemJS y Gulp: mgechev / angular2-seed
Solo por mencionar dos de ellos.
