sitio web oficial de webpack: sitio web oficial de webpack
1. ¿Qué es webpack?
Este paquete web no es realmente una o dos oraciones que se puedan decir con claridad.
Explicación oficial:
En esencia, webpack es un paquete de módulos estáticos para aplicaciones JavaScript modernas
Traducción: En esencia , webpack es un paquete de módulos estáticos para aplicaciones JavaScript modernas .
Ilustración del sitio web oficial:
abierto para comprender qué son los módulos de paquete web y el
front-end modular empaquetado :
creo que todos sabemos por qué es necesario el front-end modular .
Algunas de las soluciones que actualmente utilizan la modularización de front-end son: AMD, CMD, CommonJS, ES6.
Antes de ES6, si queríamos realizar un desarrollo modular, teníamos que recurrir a otras herramientas para poder realizar el desarrollo modular.
Y después de completar el proyecto a través del desarrollo modular, también es necesario lidiar con las diversas dependencias entre los módulos, e integrarlos y empaquetarlos.
Uno de los pilares de webpack es permitirnos realizar un desarrollo modular y ayudarnos a lidiar con las dependencias entre módulos.
Y no solo los archivos JavaScript, nuestro CSS, imágenes, archivos json, etc., pueden usarse como módulos en el paquete web.
Este es el concepto de modularidad en webpack.
¿Cómo entender el embalaje?
Después de comprender que el paquete web puede ayudarnos a modularizar y manejar varias relaciones complejas entre módulos, el concepto de empaque es muy fácil de entender.
Es decir, los diversos módulos de recursos del paquete web se empaquetan y combinan en uno o más paquetes (Bundles).
Y en el proceso de empaquetado, también puede procesar recursos, como comprimir imágenes, convertir scss a css, convertir la sintaxis de ES6 a la sintaxis de ES5 y convertir TypeScript a JavaScript, etc.
Pero parece que gruñido / trago también nos puede ayudar con la operación de empaquetado ¿Cuál es la diferencia entre ellos?
El núcleo de grunt / gulp es Task.
Podemos configurar una serie de tareas y definir las tareas que serán procesadas por la tarea (como ES6, conversión ts, compresión de imagen, conversión scss a css), y
luego dejar que grunt / gulp se ejecute estas tareas a su vez, y dejar que todo el proceso esté automatizado.
Así que grunt / gulp también se denomina herramienta de gestión de tareas automatizada de front-end.
Veamos una tarea de gulp.
La siguiente tarea es convertir todos los archivos js en src a la sintaxis de ES5.
Y finalmente enviarlo a la carpeta dist.
¿Cuándo debo usar grunt / gulp?
Si la dependencia del módulo de su proyecto es muy simple, ni siquiera se utiliza el concepto de modularidad.
Simplemente use gruñido / trago para una combinación y compresión simples.
Pero si todo el proyecto utiliza la gestión modular y la interdependencia es muy fuerte, podemos utilizar un paquete web más potente.
Entonces, ¿cuál es la diferencia entre grunt / gulp y webpack?
grunt / gulp pone más énfasis en la automatización del proceso de front-end, y la modularidad no es su núcleo.
Webpack pone más énfasis en el desarrollo y la gestión modular, y funciones como la compresión y fusión de archivos, el preprocesamiento, etc., son sus funciones complementarias.
Por supuesto, es suficiente conocer y comprender las palabras anteriores. Gulp usa menos personas y tiene muchos problemas de compatibilidad con el medio ambiente. No se puede comparar con la solución integral de webpack al problema. En el trabajo real, webpack domina el mundo. Ingrese la instalación a continuación:
Para instalar el paquete web, primero debe instalar Node.js, Node.js viene con la herramienta de administración de paquetes
npm. Instalación de node.js consulte otros bloggers: agregue la descripción del enlace
Verifique la versión de su nodo: teclado win + r para abrir cmd, ingrese directamente el nodo -v, aparece el número de versión instalada
Instale webpack globalmente (aquí especificaré el número de versión 3.6.0 primero, porque vue cli2 se basa en esta versión)
Aquí, si tiene que instalar la última versión, la versión 4 o superior (para este artículo, versión 4.44.2) Después del proceso de instalación, habrá un error en el terminal con letras rojas,
no entre en pánico, simplemente copie y pegue todas las letras rojas y amarillas en csdn para buscar, habrá una solución, simplemente no puedo encontrar mi historial de navegación, de lo contrario debo tomar una captura de pantalla
La instalación parcial del paquete web (se necesita más adelante)
--save-dev` es una dependencia durante el desarrollo y no es necesario utilizarla después de empaquetar el proyecto.
¿Por qué es necesario instalarlo localmente después de la instalación global?
Ejecute el comando webpack directamente en la terminal y use el paquete web instalado globalmente.Cuando los
scripts se definen en package.json, que contiene el comando webpack, se usa el paquete web local.
Creamos los siguientes archivos y carpetas:
análisis de archivos y carpetas: carpeta
dist: se usa para almacenar los archivos que serán empaquetados posteriormente.
Carpeta src: se usa para almacenar el archivo fuente que escribimos.
Main.js: el archivo de entrada del proyecto. Consulte los detalles a continuación para conocer el contenido específico.
mathUtils.js: define algunas funciones de herramientas matemáticas, a las que se puede hacer referencia y utilizar en otros lugares. Consulte los detalles a continuación para obtener contenido específico.
index.html: la página de inicio que muestra el navegador. html
package.json: generado por npm init y administrado por el paquete npm (no se usa por el momento y se usará más adelante)
Código en el archivo mathUtils.js:
principal .js Código de archivo en:
Ahora que los archivos js se desarrollan de forma modular, ¿se pueden usar directamente? Imposible.
Porque si estos dos archivos js se importan directamente a index.html, el navegador no reconoce el código modular.
Además, cuando hay muchos archivos js de este tipo en un proyecto real, es muy problemático para nosotros citarlos uno por uno, y es muy inconveniente administrarlos más tarde.
¿Qué debemos hacer? Utilice la herramienta de paquete web para empaquetar varios archivos js.
Sabemos que webpack es una herramienta de empaquetado modular, por lo que admite la escritura de modularidad en nuestro código y puede procesar código modularizado.
Además, si empaqueta varios js en un archivo js después de procesar la relación entre todos los módulos, resulta muy conveniente importar.
OK, ¿cómo empacarlo? Utilice el comando webpack para
mostrar el siguiente código, lo que indica que la instalación se realizó correctamente. La
versión 4 y superior puede ser así:
Después del empaquetado, se generará un archivo bundle.js bajo el archivo dist. El
contenido del archivo es un poco Análisis complicado.
El archivo bundle.js es un archivo js generado después de que el paquete web procesa las dependencias directas del archivo del proyecto. Solo necesitamos incluir este archivo js en index.html.
Pensemos en ello. Si necesita escribir la entrada y salida como parámetros cada vez que usa un comando de paquete web, es muy problemático. ¿Hay alguna manera de escribir estos dos parámetros en la configuración y leerlos directamente en tiempo de ejecución?
Por supuesto, es para crear un archivo webpack.config.js.
Actualmente, el paquete web que estamos usando es un paquete web global. ¿Qué pasa si queremos usar un paquete local?
Debido a que un proyecto a menudo depende de una versión de paquete web específica, la versión global puede ser inconsistente con la versión de paquete web de este proyecto y existe un problema con el empaquetado de exportación.
Por lo general, un proyecto tiene su propio paquete web parcial.
El primer paso es instalar tu propio paquete web parcial en el proyecto,
aquí dejamos que la instalación parcial del paquete web 3.6.0
Vue CLI3 se haya actualizado a webpack4, pero oculta el archivo de configuración, por lo que no es muy conveniente de ver.
El segundo paso es iniciar el empaquetado del paquete web a través de node_modules / .bin / webpack
El inicio se define en package.json
Sin embargo, ¿es inconveniente escribir una lista tan larga cada vez que se ejecuta?
Bien, podemos definir nuestro propio script de ejecución en los scripts de package.json.
Cuando se ejecutan los scripts de los scripts en package.json, encontrarán las posiciones correspondientes a los comandos en un orden determinado.
Primero, buscará el comando correspondiente en la ruta local node_modules / .bin.
Si no lo encuentra, lo buscará en las variables de entorno global.
¿Cómo ejecutar nuestro comando de compilación?
Uso de css-loader
¿Qué es un cargador?
Loader es un concepto muy básico en webpack.
¿Para qué se utiliza el paquete web?
En nuestro ejemplo anterior, usamos principalmente webpack para procesar el código js que escribimos, y webpack manejaría automáticamente las dependencias entre js.
Sin embargo, en desarrollo, no solo tenemos procesamiento de código js básico, también necesitamos cargar css, imágenes y algo de código avanzado de ES6 a ES5, código de TypeScript a ES5 y scss y menos a css. Convertir archivos .jsx y .vue en archivos js y así sucesivamente.
Para las capacidades del paquete web en sí, estas conversiones no son compatibles.
entonces que debemos hacer? Simplemente extienda el cargador correspondiente al paquete web.
El proceso de uso del cargador:
Paso 1: Instale el cargador que debe usarse a través de npm
Paso 2: Configure bajo la palabra clave módulos en webpack.config.js
La mayor parte del cargador se puede encontrar en el sitio web oficial de webpack y aprenda el uso correspondiente .
Durante el proceso de desarrollo del proyecto, inevitablemente necesitamos agregar muchos estilos y, a menudo, escribimos estilos en un archivo separado.
En el directorio src, cree un archivo css, que crea un archivo.css normal.
También podemos reorganizar la estructura del directorio de archivos y colocar archivos js dispersos en una carpeta js.
El código en normal.css es muy simple, es decir, el cuerpo está configurado en rojo,
pero en este momento, ¿entrarán en vigor los estilos en normal.css?
Por supuesto que no, porque no lo citamos en absoluto.
También es imposible que webpack lo encuentre, porque solo tenemos una entrada, y webpack comenzará a buscar otros archivos dependientes de la entrada.
Citando en el archivo de entrada:
reempaquetado, aparecerá el siguiente error:
Este error nos dice que debe haber un cargador correspondiente para cargar el archivo normal.css.
En el paquete web oficial, podemos encontrar los siguientes métodos de uso del cargador para estilos:
siga el archivo webpack.config.js de configuración oficial.
Nota: Hay un cargador de estilo en la configuración, no sabemos qué es, por lo que no es necesario configurarlo por ahora.
Vuelva a empaquetar el proyecto:
Pero, ejecute index.html, encontrará que el estilo no surte efecto.
La razón es que css-loader solo es responsable de cargar archivos css, pero no es responsable de incrustar estilos específicos de css en el documento.
En este momento, todavía necesitamos un cargador de estilos que nos ayude a manejarlo.
Instalemos style-loader
Nota: style-loader debe colocarse delante de css-loader.
Pero de acuerdo con nuestra lógica, en el proceso de procesamiento de archivos css, css-loader primero debe cargar archivos css, y luego style-loader realizará el procesamiento adicional. ¿Por qué poner style-loader al frente?
Esto se debe a que cuando el paquete web lee el cargador utilizado, lo lee en el orden de derecha a izquierda.
Actualmente, la configuración de webpack.config.js es la siguiente:
si queremos usar less, scss y stylus para escribir estilos en el proyecto, ¿webpack puede ayudarnos a solucionarlo?
Aquí tomamos menos como ejemplo, y los demás son iguales.
Primero creemos un archivo menos y aún así lo colocamos en la carpeta css
Continúe buscando en el sitio web oficial, encontraremos las instrucciones relacionadas con less-loader.
Primero, aún necesita instalar el cargador correspondiente.
Nota: También instalamos menos aquí, porque webpack usará menos para compilar menos archivos.
En segundo lugar , modifique los archivos de configuración correspondientes.
Agregue una opción de reglas para procesar archivos .less.
Primero llegue a esto más tarde y luego actualice. . .