resumen del paquete web
1. Introducción al paquete web
1.1 Cambios de versión
image.png
Cambios de versión importantes
image . png
1.2 Evolución funcional
Webpack V1
Webpack V2
Webpack V3
V1 -> V2
Guía de migración https://doc.webpack-china.org/guides/migrate/
V2 ->V3
Solo actualiza y actualiza
2. Conceptos básicos de webpack
2.1 Entrada
2.2 Salida
2.3 Cargadores
2.3.1 Cargadores de uso común
Relacionado con la compilación
Relacionado con el estilo
Relacionado con el archivo
2.4 Complementos
2.4.1 Complementos de uso común
Relacionado con la optimización
Relacionado con la función
2.5 Sustantivos
3. Exploración preliminar del paquete web
3.1 Uso de babel para paquete es6
3.1.1 Compilar ES 6/7
Babel
Preajustes de Babel
Babel Polyfill
Transformación en tiempo de ejecución de Babel
Ejemplos
3.2 Empaquetado de mecanografiado
Configuración
tsconfig
Tipos
Ejemplos
3.3 Extraer código común de js
Ejemplo
image.png
3.4 División de código y carga diferida
El primer método de tipo: a través del método integrado wepack
El segundo método: a través de la especificación del cargador ES2015
El método import() devuelve una promesa y la pasa los requisitos de dependencia en la importación para cargar dinámicamente el módulo. Puede usar import().then() igual que usar Promise
Escenario de división de código
Ejemplo
image.png
Esto no es lo que queremos en este momento
image.png
image.png
image.png
Cómo escribir la carga dinámica import()
SubPageA y subPageB fusionadas
image.png
Echemos un vistazo al empaquetado Los siguientes archivos incluyen A y B
image.png
Utilice async para cargar de forma asincrónica en el código del paquete web división
image.png
image.png
3.5 Procesamiento de CSS y modularización de CSS
Introducción a CSS
Cargador de estilos
Opciones del cargador de estilos
Ejemplo
Cargador de CSS
opciones
p>
Módulos CSS
Ejemplo
Configuración de Less / Sass
Ejemplo
Extracción de CSS
Ejemplo
image.png
3.6 PostCSS en Webpack
Instalación
Ejemplo
3.7 Sacudida de árbol
3.7.1 Sacudida de árbol JS
Escenarios de uso
Ejemplos
3.7.2 Sacudida de árbol CSS
Ejemplos
4. Webpack desde básico a avanzado
4.1 Procesamiento de archivos
4.1.1 Procesamiento de imágenes
4.1.2 Procesar imágenes de sprites y base64, comprimir imágenes
4.1.2 Procesar archivos de fuentes
4.1.3 Procesar bibliotecas JS de terceros
1.providePlugin
para importar jQuery como ejemplo
Introducir jQuery en bibliotecas locales
2.imports-loader
4.2 HTML en webpack (genera HTML automáticamente)
4.2.1 Generar HTML
opciones
4.2.2 Introducir imágenes en HTML