Obtenga más información sobre el paquete web de la herramienta de empaquetado de módulos

1. ¿Qué es webpack?

1. Explicación oficial

En esencia, webpack es una herramienta de empaquetado modular estático para aplicaciones JavaScript actuales. (Esta oración se puede resumir en dos puntos: módulos y empaques )

¡Hablemos de los conceptos de módulos y embalaje !

2. Modularización front-end

• Algunas soluciones para la modularización front-end: AMD, CMD, CommonJS, ES6 (los navegadores no pueden reconocerlos , pero webpack puede ser su soporte subyacente antes de que se pueda llevar a cabo el desarrollo modular)
• Antes de ES6 , si desea modularizar El desarrollo requiere la ayuda de otras herramientas para que podamos llevar a cabo el desarrollo modular.
• Después de completar el proyecto a través del desarrollo modular, también debemos lidiar con varias dependencias entre módulos e integrarlas y empaquetarlas .
• En este momento, aparece webpack . cores es que nos permite realizar desarrollo modular y nos ayuda a lidiar con las dependencias entre módulos.
• No solo los archivos JavaScript , nuestro CSS , imágenes , archivos json , etc. se pueden usar como módulos en el paquete web.

3. ¿Cómo entender el packaging?

• Webpack puede ayudarnos a modularizar y manejar varias relaciones complejas entre módulos . El concepto de empaquetado es fácil de entender.
• Es empaquetar y fusionar varios módulos de recursos en el paquete web en múltiples paquetes (Bundle).
• Durante el proceso de empaquetado, también se pueden procesar recursos , como comprimir imágenes, convertir scss a css y convertir la sintaxis de ES6 a ES5 y convertir TypeScript. a JavaScript y otras operaciones.
• Las herramientas de empaquetado incluyen grunt/gulp.

Comparación entre webpack y grunt/gulp.

• El núcleo de grunt/gulp es Task.
  1. Puede configurar una serie de tareas y definir las transacciones que serán procesadas por las tareas (como ES6, conversión ts, compresión de imágenes, conversión de scss a css)
  2. Luego, deje que grunt/gulp ejecute estas tareas en secuencia y automatice todo el proceso

• para ver una tarea de gulp.
  1. La siguiente tarea es convertir todos los archivos js bajo src a la sintaxis ES5.
  2. Y finalmente envíelo a la carpeta dist.
  

• ¿Cuándo usar gruñido/trago?
  1. Las dependencias del módulo del proyecto son muy simples y ni siquiera se utiliza el concepto de modularización.
  2. Simplemente use grunt/gulp para fusionar y comprimir de forma sencilla.
  3. Si todo el proyecto utiliza gestión modular y la interdependencia es muy fuerte, podemos usar webpack.

• ¿Cuál es la diferencia entre gruñido/trago y paquete web?
  Primero , grunt/gulp pone más énfasis en la automatización de los procesos front-end y la modularización no es su núcleo.
  2. Webpack pone más énfasis en la gestión del desarrollo modular , y funciones como la compresión, fusión y preprocesamiento de archivos son sus funciones incluidas.

2. Instalación de webpack

( wepack debe depender del entorno del nodo para el funcionamiento normal, y el entorno del nodo debe ser. requerido para la ejecución normal. Utilice la herramienta npm para administrar varios paquetes dependientes en el nodo).

• Por lo tanto, para instalar webpack, primero debe instalar Node.js. Node.js viene con la herramienta de administración de paquetes npm
• para instalar webpack globalmente (npm install webpack@. 3.6.0 -g) e
• instalar webpck localmente (npm install [email protected] --save-dev) –save-dev es una dependencia de desarrollo y no necesita usarse después de empaquetar el proyecto.

3. Configuración del paquete web

1. Análisis de archivos y carpetas

• Carpeta dist: se usa para almacenar archivos empaquetados posteriormente.
• Carpeta src: se usa para almacenar los archivos fuente que escribimos.
  main.js : el archivo de entrada del proyecto.
  mathUtils.js : define algunas funciones de herramientas matemáticas a las que se puede hacer referencia y utilizar en otros lugares.
  index.html : el navegador abre el html de la página de inicio mostrada (aquí se hace referencia al contenido del archivo empaquetado final en src, es decir, la carpeta dist ).
  package.json : generado a través de npm init, un archivo administrado por el paquete npm.

El siguiente es el código en el archivo mathUtils.js y el archivo main.js : (especificación de modularización CommonJS, CommonJS es el estándar de modularización, nodejs es la implementación de CommodJS (modularización))

2. Comando

webpack ./src/main.js ./dist/bundle.js (empaquetar el archivo main.js en un archivo bundle.js)

Descripción: De la misma manera, también puede usar la especificación modular ES6

3. Cree un archivo webpack.config.js para simplificar el comando de empaquetado

(

asigne el comando de empaquetado a la entrada y salida del paquete).

entrada: Para la

salida de entrada empaquetada: Necesitamos obtener la ruta en la

• salida de salida empaquetada dinámicamente,
• por lo que podemos usar la sintaxis de Node.js para importar un módulo. Este módulo es el archivo entre comillas de ruta (ruta constante = requerir). ('ruta') Debe encontrarse en el paquete del nodo)
• Utilice node.js a través del comando npm init (inicialización)
• para generar el archivo package.json (este archivo describe la información del proyecto actual) licencia: "ISC" (código abierto para el proyecto), la siguiente es

la descripción del código package.json: si desea utilizar node, debe confiar en el archivo package.json

Después de ejecutar npm install [email protected] --save-dev , las dependencias se agregan de la siguiente manera

4. Asignación de comandos del paquete web a npm run

Además de asignar el paquete web a la entrada y salida , también puede asignar los comandos del paquete web a npm run para algunas operaciones (debe modificarse en la etiqueta de script **"script"** en el paquete. json). .

4. El uso del cargador

1. ¿Qué es el cargador?

• El cargador es un concepto muy central en el paquete web.

Ahora pensemos para qué se utiliza el paquete web.

• Usamos principalmente webpack para procesar código js, ​​y webpack manejará automáticamente las dependencias relacionadas con js
• . Sin embargo, durante el desarrollo, no solo es procesado por el código js básico, sino que también necesita cargar css, imágenes y algo de código avanzado. convierta ES6 a ES5, convierta TypeScript a código ES5, convierta scss y menos a css, convierta archivos .jsx, .vue a archivos js, etc.
• Para las capacidades del paquete web en sí, estas transformaciones no son compatibles.
• En este momento, simplemente extienda el cargador correspondiente al paquete web.

2. Proceso de uso del cargador

1)

Trabajo de preparación para el procesamiento de archivos css:

1. En el directorio src, cree un archivo css. , cree un archivo normal.css en él

2. Reorganice la estructura de directorios del archivo y coloque los archivos js dispersos en una carpeta js

3. El código en normal.css es muy simple, es decir, configure el cuerpo en rojo

4. Pero el estilo en normal.css no tendrá efecto en este momento, porque no está referenciado y webpack no puede encontrarlo, porque solo tenemos una entrada, y webpack buscará otros archivos dependientes a partir de esa entrada.

5. En este momento debemos hacer referencia a él en main.js, el archivo de entrada

Después de eso, ¡necesitamos importar el cargador correspondiente para usarlo!

• Paso 1 : instale el cargador que necesita usar a través de npm
  (instalación npm --save-dev css-loader) (instalación npm --save-dev cargador de estilos)
  En el sitio web oficial de webpack, busque el siguiente método para usar el cargador de estilos:
  
  

• Paso 2 : realice las instrucciones de configuración bajo la palabra clave de módulos en webpack.config.js

: css-loader solo es responsable de cargar archivos css y no es responsable de incrustar estilos CSS específicos en los documentos.

En este momento, también necesitamos un estilo. cargador ayúdanos a procesar

Nota: el cargador de estilos debe colocarse delante del cargador css.

2) Paso 1 de procesamiento de menos archivos

• : Instale el cargador correspondiente (nota: aquí también se instala menos, porque el paquete web usará menos para compilar el archivo menos). Comando: npm install --save-dev less-loader less

• Paso 2 : modifique el archivo de configuración correspondiente (en webpack.config.js) y agregue una opción de reglas para procesar archivos .less. como sigue:

3)

• Paso 1 del procesamiento del archivo de imagen: agregue dos imágenes al proyecto (una tiene menos de 8 kb y la otra tiene más de 8 kb).

• Paso 2 : primero considere hacer referencia a la imagen en el estilo CSS, de la siguiente manera

  

• Paso 3 : modifique el archivo de configuración correspondiente (en webpack.config.js) y agregue una opción de reglas para procesar archivos de imagen. como sigue:

  

• Paso 4 : Se encontró un error después del empaquetado, porque las imágenes de más de 8 kb se procesarán a través del cargador de archivos , pero no hay ningún cargador de archivos en nuestro proyecto. (Necesita instalar file-loader , comando npm install --save-dev file-loader Después de la instalación y el empaquetado, encontrará que hay un archivo de imagen adicional en la carpeta dist).

  

Descripción:

• Descubrí que el paquete web generó automáticamente un nombre muy largo para nosotros

  1. Este es un valor hash de 32 bits para evitar la duplicación de nombres.
  2. Sin embargo, en el desarrollo real, puede haber ciertos requisitos para el nombre de la imagen empaquetada

• . Por lo tanto, podemos agregar las siguientes opciones en opciones:

  1. img: la carpeta en la que se empaquetará el archivo.
  2. nombre: obtenga el nombre original de la imagen y colóquelo en esta ubicación
  3. Hash8: para evitar conflictos con los nombres de las imágenes, todavía se utiliza hash, pero solo se conservan 8 bits.
  4. ext: Utilice la extensión original de la imagen de la siguiente manera:
  

• También deberá configurar y modificar la ruta utilizada por la imagen más adelante

  . 1. De forma predeterminada, el paquete web devolverá la ruta generada al usuario.
  2. Sin embargo, todo el programa está empaquetado en la carpeta dist, por lo que aquí debe agregar otro dist/ a la ruta.
  como sigue:
  

En resumen, después del empaquetado, el archivo de imagen se ve así

4), Babel de ES6 a ES5

5. Configure Vue en el paquete web

• Paso 1: comando de ejecución de terminal (npm install --save vue)

• Paso 2: Importe Vue en main.js (importe Vue desde 'vue') de la siguiente manera

• Paso 3: cuelgue p en la instancia de vue en index.html, de la siguiente manera

• Paso 4: Se encuentra un error después del empaquetado. Necesitamos especificar que el vue que utilizamos es la versión del compilador en tiempo de ejecución .

Operaciones específicas: debe agregar resolución al paquete web y tomar un alias ( alias ), de la siguiente manera:

6. Uso de Vue en el paquete web

Paso 1: colgar p en la instancia de vue en index.html

Paso 2: Importe el componente de la APLICACIÓN al archivo main.js , registre la APLICACIÓN en la instancia de Vue y use la APLICACIÓN del componente en la plantilla de Vue ( componenteización ).

Paso 3: cree el archivo APP.vue y separe la plantilla de la página vue del código js y el código css , de la siguiente manera

Paso 4: configurar el cargador correspondiente de vue,

Modifique el archivo de configuración de webpack.config.js:

7. Uso del complemento

1. Comprender el complemento

• ¿Qué es un complemento?
  1. Complemento significa complemento, que generalmente se utiliza para ampliar una arquitectura existente.
  2. Los complementos en webpack son varias extensiones de las funciones existentes de webpack, como optimización de empaquetado, compresión de archivos, etc.
• La diferencia entre cargador y complemento
  1. El cargador se utiliza principalmente para convertir ciertos tipos de módulos. Es un convertidor.
  2. El complemento es un complemento, que es una extensión del propio paquete web y
• el proceso de uso de un complemento extensor.
  1. Paso 1: la instalación a través de npm requiere el uso de complementos (algunos complementos ya integrados en el paquete web no necesitan instalarse)
  2. Paso 2: Configurar el complemento en complementos en webpack.config.js

2. Webpack: agregar información de derechos de autor Uso del complemento

3. Empaquetar el complemento html

4. Complemento de compresión js

8. Cree un servidor local

• . Webpack proporciona un servidor de desarrollo local opcional. Este servidor local está construido en base a node.js y utiliza el marco express internamente. Puede lograr lo que queremos al permitir que el navegador actualice y muestre automáticamente los resultados modificados. .

• Sin embargo, es un módulo separado. Debe instalarlo antes de usarlo en webpck. Comando: (npm install --save-dev [email protected])

• devserver también es una opción en webpack . se puede establecer de la siguiente propiedad :
  1. contentBase: qué carpeta proporciona servicios locales. La carpeta raíz es la predeterminada. Necesitamos completar ./dist aquí.
  2. puerto: número de puerto
  3. en línea: actualización de la página en tiempo real
  4. HistoryApiFallback: en la página SPA, la

• configuración del archivo webpack.config.js del modo historial que se basa en HTML5 se modifica de la siguiente manera:
  

• El parámetro –open significa abrir el navegador directamente

Además,

a continuación queremos separar los archivos de configuración del paquete web: es decir, separar las cosas necesarias para el desarrollo y las cosas utilizadas para la publicación ( compilación ). como sigue:

9. Vue CLI

1. ¿Qué significa CLI?

andamio

• de
• proyecto vue.js lanzado oficialmente.
• Con vue-cli, puede crear rápidamente un entorno de desarrollo de Vue y la configuración del paquete web correspondiente.

Requisitos previos para usar Vue CLI - Node (Node debe estar instalado)

npm

debe estar involucrado.

• El nombre completo de NPM es Node Package Manager
• , que es una herramienta de distribución y administración de paquetes de NodeJS. Se ha convertido en un estándar no oficial para publicar módulos (paquetes) de Node
• y se utiliza a menudo para instalar algunos paquetes dependientes durante el proceso de desarrollo.

3. Utilice Vue CLI para

• instalar Vue scaffolding

npm install -g @vue/cli

Nota: La versión instalada arriba es la versión Vue CLI3. Si desea inicializar el proyecto de acuerdo con el método Vue CLI2, no es posible

• inicializarlo. el proyecto Vue CLI2

vue init webpack my -project