webpack5
Siempre he tenido un conocimiento general del paquete web antes, sin un estudio completo, ahora que he terminado mi defensa, lo estudiaré de principio a fin.
webpack es una herramienta de empaquetado de módulos estáticos. Como su nombre indica, admite la modularización. Empaquetamos nuestros archivos en recursos estáticos como js css png y otros recursos para que los coloquemos en el servidor de recursos estáticos.
El mecanismo de empaque de webpack:
webpack encontrará nuestro archivo de entrada, comenzando desde el archivo de entrada, encontrará todos los módulos que necesita la aplicación paso a paso, generará un gráfico de dependencia y luego empaquetará todos los módulos de acuerdo con el gráfico de dependencia. (Los diferentes archivos corresponden al paquete del cargador no utilizado.) Si el módulo no está en el gráfico de dependencia, no se empaquetará.
También hay un punto de optimización del rendimiento, la agitación de árboles, lo que significa que cuando se introduce un archivo js, se declara una función en él, pero no se utiliza desde el principio hasta el final. Luego, por consideraciones de optimización del rendimiento, esta función no puede Para envasado, se puede utilizar la sacudida de árboles. Lo mencionaré más adelante, primero aprenda los conceptos básicos.
Normalmente, siempre que generemos un archivo index.js bajo src, podemos ejecutar webpack en la línea de comando para empaquetarlo.
Pero si queremos cambiar el nombre del archivo de Road King, podemos usar
npx webpack --entry ./src/my
custom.js npx webpack --output ./build/custom.js.
La ubicación del sitio web oficial se muestra en la figura y se pueden consultar muchas líneas de comando.
Pero nuestro desarrollo generalmente se configura a través del archivo webpack.config.js.
Este es el archivo de configuración más básico.
Cada vez que ejecutamos npm run build / yarn build, se ejecutará webpack, y él irá al directorio raíz para encontrar el archivo webpack.config.js para ver si existe este archivo, si lo tiene, use la configuración dentro Si no es así, utilice la configuración predeterminada.
Se hace referencia al archivo webpack.config.js usando COMMONJS, así que uso module.exports para exportar.
La entrada es el archivo de entrada de configuración, como quién se empaquetará. Puedes usar rutas relativas
La salida es generalmente un objeto, configure el archivo de exportación, como en quién está empaquetado. El nombre del archivo en el interior se refiere al nombre del archivo empaquetado, y la ruta es la ruta donde se coloca el archivo empaquetado. Tenga en cuenta que esta no puede ser una ruta relativa, solo una ruta absoluta. Usamos el módulo de ruta y path.resolve (a, b ) es el empalme de ayb, __dirname es el directorio para obtener la carpeta actual, es decir, a la configuración 02_webpack. El siguiente ./build es para configuración.
Aparece después de ejecutar npm run build,
pero si queremos cambiar el nombre del archivo webpack.config.js, se puede empaquetar correctamente si lo cambiamos a
través de --config xxx 
.
aprendizaje del cargador
cargador css
Primero veamos un caso.
Recuerde importarlo en el archivo de entrada, de lo contrario no se puede empaquetar.
Agregue estilos. Importe
y empaquete. 
Si informa un error, es posible que necesite un cargador para procesar el tipo de archivo, etc. Esto significa que necesitamos un cargador correspondiente para manejar diferentes tipos de archivos.
¿Qué es un cargador?
El cargador puede realizar una conversión al código fuente del módulo. Nuestro archivo css es un módulo que se importa mediante importación, pero webpack no sabe cómo cargarlo cuando se importa, por lo que debemos tener un cargador correspondiente para ayudar a webpack a completar esta función.
El archivo css usa css-loader
El ejemplo en el sitio web oficial,
instalémoslo primero. En 
este momento, tenemos que configurarlo, porque css-loader no se ha asociado con nuestro archivo css.
Hay tres formas de utilizarlo:
1 Importación en línea "css-loader! ../… /… / xxx.css"
El error ha desaparecido. Ignora esta advertencia por el momento. Demuestra ser útil. 
No hay respuesta porque el cargador de estilos no funcionó.
2 vías cli
Pero parece que webpack5 no es compatible con esto y se informará de un error.
3 métodos de configuración de uso frecuente (configurados en webpack.config.js)
Para configurar en module.rules, como su nombre indica, módulo módulo, reglas reglas, reglas del módulo, es configurar las reglas de varios módulos como css png vue.
Hay muchos objetos de reglas en las reglas y cada objeto es un módulo correspondiente, como css, imágenes, archivos vue, etc.
Hay muchos atributos en cada objeto de regla.
La prueba 1 se utiliza para hacer coincidir los recursos, es decir, el recurso coincidente es el archivo que procesará este objeto de regla. Generalmente, el
uso de la expresión regular 2 es una matriz, que contiene objetos uno tras otro, y los objetos contienen atributos
. 
Primero observe la Figura 2.1 . Atributos del objeto UseEntry
2.1.1 cargador Cargador usado para procesar recursos
2.1.2 opciones, atributos opcionales, El valor es una cadena u objeto, y el valor se pasa al cargador (utilizado en el aprendizaje posterior del cargador personalizado). La
consulta 2.1.3 se reemplaza actualmente por opciones.
Ejecutar ahora
no informará de un error. También existen métodos taquigráficos.
Por ejemplo, 
o
es en realidad 
una abreviatura de esto, y aún se convertirá a este modo en el futuro.
Ahora hablemos del cargador de estilos mencionado anteriormente,
El css-loader también está configurado, ¿por qué no tiene efecto? Porque el css-loader solo es responsable del análisis, pero no insertará el css analizado en la página. Entonces, en este momento, Style-Loader está en el escenario.
cnpm install style-loader -D
install, luego configure, no solo use css-loader cuando haga coincidir el archivo css, sino que también use style-loader.
Pero se debe prestar atención al orden. Cuando webpack procesa el cargador, se procesa desde la parte posterior, por lo que tenemos que poner css-loader en la parte posterior, primero analizar el css antes de insertarlo en la página.
Después de la construcción, como se muestra en la figura,
sale el estilo.
Lo que el cargador de estilos realmente hace es documentar, crear ('estilo') para crear una etiqueta de estilo, y luego poner el CSS en el estilo e insertarlo en el encabezado.
Este encabezado no está disponible cuando no configuramos el cargador de estilos. Si no lo cree, puede probarlo usted mismo.
Hay muchos preprocesadores para css, como less scss
Entonces, cómo lidiar con él, tome Less como ejemplo,
el error reportado es similar al anterior, pero también carece de cargador para manejar.
Después de todo, hay que convertir menos archivos a css para poder utilizarlos. La conversión se realiza con la herramienta less, que no tiene nada que ver con el paquete web.
Primer vistazo a menos cnpm i menos -D
La conversión fue exitosa.
Pero si hay una gran cantidad de menos, la conversión una por una no es realista, por lo que debemos usar less-loader
La esencia de less-loader es utilizar la herramienta less para ayudar con la conversión.
El sitio web oficial también dice que instale menos.
cnpm i less-loader -D
Debido a que el archivo less es diferente del archivo css, necesitamos crear un nuevo objeto de regla para que coincida con menos, y less-loader solo nos ayuda a convertir menos en css, y css tiene que ser cargado y ejecutado por css-loader, style- cargador, echa un vistazo
éxito.
El papel de postcss-loader
Problema de adaptación del navegador (no solo la adaptación del tamaño de la pantalla)
Para las funciones compatibles con diferentes navegadores, como funciones CSS, funciones js, etc.
Resuelva el problema: no necesita escribirlo usted mismo, puede usar herramientas (el prefijo automático agrega automáticamente el prefijo del navegador)
algunas deben agregarse y algunos no necesitan agregarse, agregando ciegamente solo Aumente el tamaño del archivo css.
Por lo tanto, generalmente daremos algunas condiciones, como las que tienen muchos andamios,
Al igual que React, por ejemplo,> 0.2% le dice a autoperfix y babel, css, js, etc. que sean compatibles con navegadores con una participación de mercado de más del 0.2%. Utilice el sitio web de caniuse
Los sitios web autorizados como raect o vue utilizan este sitio web para consultar más del 0,2% de los sitios web.
Pero cómo encontrarlo y empujar los datos encontrados a autoperfix, babel y otras herramientas para usar, tenemos que conocer la herramienta de lista de navegadores.
¿Qué es la lista de navegadores?
browserslist es una forma de compartir la configuración del navegador de destino y la versión de Node.js entre diferentes herramientas de front-end.
Entonces tenemos que configurar la lista de navegadores.
1 defaults Configuración predeterminada de la lista de navegadores (> 0.5%, última 2 versión, FireFox ESR, no muerto)
2 5%> = << =
3 navegadores inactivos sin soporte oficial o actualizaciones durante 24 meses
4 últimas 2 versiones por navegador Las dos últimas versiones
5 node10 node14 para la versión de nodo
6 IOS7 use directamente el navegador ios7
7 not ie <= 8 Excluir debajo de ie8
...
caniuse-list es una herramienta proporcionada por canise para ayudar a consultar los navegadores que coinciden con las condiciones,
como ejecutar npx browserslist "> 1%, 2 últimas versiones "Ver navegadores adaptados.
Cuando usamos ,, usamos la unión, y si es una intersección, si no, es la inversa.
Configurar lista de navegadores
1 Configure en package.json
2 Cree el archivo .browserslistrc Si
no lo escribe, se utilizará la configuración predeterminada.
