¿El CSS incluido en el paquete web contiene dos presentaciones idénticas?

Webpack es un generador de recursos front-end y un empaquetador de módulos estáticos. Desde la perspectiva de Webpack, todos los archivos de recursos (js/json/css/img/less/…) en el front-end se procesarán como módulos. Cuando Webpack procesa una aplicación, realizará un análisis estático en el módulo en función de sus dependencias y empaquetará y generará los recursos estáticos correspondientes. El diagrama de flujo de empaquetado de Webpack se muestra en la Figura 1-1.

Para comprender Webpack, esto es suficiente

Figura 1-1 Diagrama de flujo de empaquetado de Webpack

2 Cinco conceptos centrales de Webpack

. 2.1 Entrada

La entrada le indica a Webpack que analice y cree el gráfico de dependencia interna y use los archivos que contiene como entrada de paquete.

2.2 Salida

La salida le dice a Webpack dónde generar los paquetes de recursos empaquetados y cómo nombrarlos.

2.3 Cargadores

Los cargadores permiten a Webpack procesar archivos utilizando lenguajes distintos de JavaScript, que es el único idioma que Webpack entiende.

2.4 Complementos

Los complementos se pueden utilizar para realizar una gama más amplia de tareas. Los complementos se pueden utilizar para realizar una gama más amplia de tareas, desde empaquetado y compresión hasta redefinir variables en el entorno.

Modo 2.5

El modo le indica a Webpack que use la configuración de modo adecuada. Hay dos modos, el modo de desarrollo y el modo de producción, los cuales se presentan brevemente a continuación.

Desarrollo: modo de desarrollo, que permite que el código se ejecute en el entorno local, configura Process.env.NODE_ENV en desarrollo y habilita los complementos NamedChunksPlugin y NamedModulesPlugin

Producción; : Modo de producción, permite que el código optimice el entorno de ejecución, establezca Process.env.NODE_ENV en producción y habilite los complementos NamedChunksPlugin y NamedModulesPlugin;

Producción: Modo de producción, permite que el código optimice el En el entorno de ejecución, configure Process.env.NODE_ENV. Para producción, habilite los complementos NamedChunksPlugin y NamedModulesPlugin. env.NODE_ENV, también habilita los complementos FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitreplaceStringsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin y UglifyJsPlugin.

3.Configuración de Wbepack

3.1 archivo webpack.config.js

webpack.config.js es el archivo de configuración de webpack, que se utiliza para instruir a webpack para funcionar. La configuración se cargará cuando se ejecute la directiva del paquete web. Todas las herramientas de compilación se ejecutan en la plataforma nodejs y utilizan la modularidad commonjs de forma predeterminada. La configuración básica de webpack.config.js se muestra en la Figura 3-1.

Para entender Webpack, esto es suficiente

Figura 3-1 Configuración básica de webpack.config.js

3.2 Configuración devServer

devServer se utiliza para la automatización (compilación automática, apertura automática del navegador, actualización automática del navegador). Solo compilará y empaquetará en la memoria y no generará ningún archivo.

Después de instalar webpack-dev-server localmente, use el comando npx webpack-dev-server para iniciar devServer. El código principal se muestra en la Figura 3-2.

Para comprender Webpack, estos son suficientes

Figura 3-2 Código central de configuración de devServer

3.3 Empaquetado html/style/images/otros recursos

Para empaquetar diferentes recursos se utilizarán diferentes cargadores y complementos. El proceso de empaquetar html/style/images/otros recursos es el siguiente.

3.3.1 Empaquetado de recursos html

1. Descargue el complemento html-webpack-plugin

2. Introduzca el complemento html-webpack-plugin; -in;

3. Utilice el complemento html-webpack-plugin y configúrelo en consecuencia.

3.3.2 Recursos de estilo de empaquetado

Diferentes archivos de estilo requieren diferentes cargadores

1. Descargue el cargador;

2 .loader, Cargador CSS y cargador de estilos. La función de css-loader es convertir archivos css en módulos commonjs y cargarlos en archivos js, mientras que la función de style-loader es crear etiquetas de estilo para insertar recursos de estilo en js y agregarlos al encabezado para que sean efectivos. 4 Extraer css en un archivo separado/procesamiento de compatibilidad css/comprimir css

3.4.1 Extraer css en un archivo separado

Después de empaquetar el archivo de estilo, se generará junto con el archivo js de forma predeterminada, el complemento El archivo css empaquetado se puede generar por separado. El archivo se genera a través del complemento y el proceso es el siguiente.

1. Descargue el complemento mini-css-extract-plugin

2. Haga referencia al complemento

3. /p>

3.4 .2 Manejo de la compatibilidad con CSS

1. Descargue postcss-loader y postcss-preset-env

2. p>2. Configure la compatibilidad del entorno de desarrollo y el entorno de producción en el atributo browsertslist de package.json y establezca la versión del navegador que admita este estilo

3. Busque la configuración a través de postcss en la lista de navegadores de package.json y cargue el estilo de compatibilidad CSS especificado a través de la configuración.

3.4.3 Comprimir CSS

1. Descargue el complemento optimizado-css-assets-webpack-plugin

2. /p>

3. Utilice este complemento

3.5 js verificación de sintaxis eslint/js procesamiento de compatibilidad/compresión js

3.5.1 js verificación de sintaxis eslint

1. Descargue eslint-loader y eslint

2. Configure eslintConfig

3 en package.json. Configure eslint-loader, que solo detecta archivos js y desea excluir bibliotecas de terceros y solo detectar su propio código fuente. También puede configurar fix:true en la configuración de opciones para corregir automáticamente los errores de eslint.

Procesamiento de compatibilidad 3.5.2 js

1. Descargue babel-loader, @babel/core y @babel/preset-env, y use @babel/preset-env para realizar operaciones básicas. js y luego realizar el procesamiento de compatibilidad que no se puede lograr anteriormente a través de corejs y la carga bajo demanda

2. Configurar el cargador

El código principal del procesamiento de compatibilidad js se muestra en Figura 3- 3 mostrada

Para comprender Webpack, solo necesita comprender estos

Figura 3-3 El código central del procesamiento de compatibilidad js

3.5.3js compresión

Establezca el modo en "Producción" para comprimir automáticamente el código js.

4. Optimización del rendimiento del paquete web

El rendimiento del paquete web se puede optimizar en entornos de desarrollo y producción. El entorno de desarrollo considera principalmente la optimización de la velocidad de empaquetado y construcción y la depuración de código, mientras que el entorno de producción considera principalmente la optimización de la velocidad de empaquetado y construcción y el rendimiento del tiempo de ejecución del código. A continuación se ofrece una breve introducción a los entornos de desarrollo que utilizan HMR para aumentar la velocidad de compilación.

4.1 HMR

HMR (Reemplazo de módulo en caliente), es decir, cuando cambia la función de un módulo, solo se actualiza el paquete del módulo, en lugar de actualizar todos los módulos. en devServer Configure el atributo hot:true para habilitar la función HMR.

Para archivos de estilo, puede usar la función HMR porque el cargador de estilos se ha implementado internamente.

Para archivos js, no puede usar la función HMR de forma predeterminada. siguiente: Al configurar el atributo hot:true en devServer, modifique el código js del archivo de entrada y agregue código que admita la función HMR, de modo que HMR solo pueda procesar otros archivos que no sean el archivo de entrada del archivo js, ​​pero no puede tener efecto en el archivo de entrada, porque una vez que se actualiza el archivo de entrada, solo actualizará este módulo, no todos los módulos.

Para los archivos html, la función HMR no se puede utilizar de forma predeterminada, lo que hará que el archivo html no se pueda actualizar en caliente. La solución es: modificar el archivo de entrada e introducir el archivo html, entonces. para resolver el problema de que el archivo html no se puede actualizar en caliente.