Hermano Lu, como principiante de front-end, ¿puedes alfabetizar el paquete web? Después de todo, esto rara vez se usa en proyectos escolares, así que realmente quiero saberlo.
Hablando de paquete web, Xiaolu se especializará en una serie, desde la alfabetización simple hasta la pintura a mano. Este es un proceso. Siempre que pueda trabajar duro, puede pintar a mano el código fuente con Brother Lu.
Este artículo se centra principalmente en la alfabetización. Después de todo, la mayoría de ellos son estudiantes, así que sé webpack y lo que puede ayudarnos a hacer en el futuro, cómo conseguir una promoción y un aumento de salario a través de webpack, jaja, es un poco grande, esto no es para promocionar el paquete web. Vayamos directamente al tema.
El texto completo está explicado en lengua vernácula y se garantiza que comprenderá todo lo que diga.
De conocido a encuentro
Aprendí el front-end en la etapa inicial, y no sabía que existía tal cosa. La primera vez que escuché el término paquete web fue solo 2 meses después de cambiar al front-end, ¡WC! ¿No es el front-end solo un diseño web, y esta cosa elegante, les pregunté a mis compañeros de clase más tarde, no sabía qué estaba haciendo esto?
Más tarde, busqué mucha información relacionada en Internet, pero debido a limitaciones cognitivas, no pude averiguar para qué se usaba.
De esta manera, hasta más tarde, hasta que se mencione la ingeniería de front-end, entiendo completamente lo que puede hacer el paquete web y silenciosamente desempeñar un papel poderoso en el front-end. En esta era de ingeniería front-end, webpack es una herramienta poderosa para proyectos front-end.
¿Por qué utilizar webpack?
Con el crecimiento de proyectos front-end, es necesario comprimir una gran cantidad de códigos y archivos de recursos, lo que hace que el proyecto empaquetado sea más pequeño y ligero.
Luego apareció webpack, y la aparición de webpack es para resolver estos problemas.Si fusiona y comprime archivos, solo necesita configurar webpack en el proyecto y ejecutar los comandos relevantes para comprimir y fusionar el proyecto.
Además, hay otras funciones, como la actualización en caliente, cada vez que cambiamos el proyecto, necesitamos actualizar la página web, y después de usar el paquete web, la página se actualiza automáticamente después de que se guarda el proyecto.
Se han agregado preprocesadores como Scss y Less, así como procesamiento de estilo, como agregar automáticamente prefijos de navegador a los atributos, y usar babel para convertir gramáticas superiores como ES6 y ES7 que no admiten navegadores a la gramática ES5 reconocida por el navegador.
A través de webpack, podemos aumentar nuestra eficiencia de desarrollo y utilizar el mecanismo de empaquetado interno de webpack para procesar automáticamente algunas cosas.La eficiencia de desarrollo es para ahorrar tiempo y el proyecto se puede mantener de manera eficiente, reduciendo así algunos costos.
¿Qué es webpack?
En una palabra, webpack es un empaquetador que incluye todos los scripts, imágenes, recursos, estilos, etc.
Introducción a la configuración del paquete web
Para ser honesto, esto es fácil de usar en el proyecto, pero es muy antipático para los principiantes. Al menos, para mí, cuando recién comencé a aprender, será fácil de ver y será incómodo.
Además, no es que me haya quejado de los documentos oficiales chinos de webpack, para los principiantes, especialmente para aquellos que tienen poca comprensión de los conceptos, el aprendizaje temprano es extremadamente hostil. Originalmente, el paquete web no es tan difícil de entender, pero estas cosas agregan algo de misterio al paquete web.
Además, después de investigar gradualmente el código fuente del paquete web, descubrí que las otras razones por las que los principiantes no son amigables en la etapa inicial son que algunos conceptos y algunas configuraciones, etc., lo saben y no saben por qué. Después de leer el código fuente, sé cómo se utilizan estas configuraciones.
concepto basico
1. Entrada y salida
Los archivos empaquetados deben tener una ruta de entrada total, erntry es el atributo de la configuración de la ruta del archivo de entrada. Al mismo tiempo, corresponde a la ruta de salida, es decir, la ruta en la que se debe colocar el archivo empaquetado y cuál es el nombre del archivo empaquetado.
Entry también puede configurar múltiples archivos de entrada, empaquetar estos archivos por separado y luego configurar múltiples salidas, diferentes archivos empaquetados y colocarlos en diferentes carpetas.
1const path = require("path")
2module.exports = {
3 mode: "development", // 生产模式
4 entry: "./src/js/index.js", // 入口
5 output: {
6 path: __dirname + "/dist/pro", // 向出口
7 filename: "xiaolu.min.js" // 输出的文件名
8 },
9}
Puse los métodos de configuración principales en github, que se pueden ver leyendo el texto original.
2 、 cargador
Podemos entenderlo como un cargador. Podemos configurar diferentes cargadores para convertir el código de diferentes archivos. Por ejemplo, hemos configurado el cargador css-loader, que se utiliza principalmente para analizar los archivos importados por la sintaxis de importación encontrada en el código. Por ejemplo, el cargador de estilo de configuración se utiliza principalmente para importar automáticamente los archivos empaquetados en el archivo index.html.
Se puede decir que después de configurar el cargador, el resto está totalmente automatizado. El cargador ejecuta el emparejamiento de abajo hacia arriba, de derecha a izquierda, y se debe prestar atención al pedido.
1module: {
2 rules: [
3 //-> CSS 样式处理
4 {
5 test: /\.css$/,
6 use: [
7 // 从后向前加载
9 "style-loader",
10 "css-loader"
11 ]
12 },
13 ]
14 },
Al mismo tiempo, también podemos personalizar el cargador, es decir, de acuerdo con las necesidades adicionales de nuestro proyecto, podemos escribir un cargador que satisfaga las necesidades. Esto se pregunta a menudo en las entrevistas, ¿alguna vez ha escrito loader a mano?
3. Complementos
Los complementos introducen principalmente complementos de terceros. Se han implementado algunos complementos de uso común para nosotros. Solo necesitamos descargar e instalar la configuración en npm.
Por ejemplo, el complemento htmlWebpackPlugin se usa principalmente para empaquetar plantillas html, y luego puede configurar algunas opciones para escribir el código html en una línea o eliminar las comillas dobles.
1plugins: [
2 new HtmlWebpackPlugin({
3 filename: "index.html",
4 template: "./src/html/demo.html",
5 minify: {
6 removeAttributeQuotes: true, // 删除双引号
7 collapseWhitespace: true // 将其折叠为一行
8 }
9 }),
10]Después de empaquetar lo anterior, el html se convertirá en una línea de código, ahorrando así el tamaño del archivo.
Las configuraciones más básicas e importantes son estas tres. ¿Qué complementos quieres usar? Según el sitio web oficial o los proyectos de uso común en el resumen de github, básicamente no hay ningún problema para comenzar con webpack.
optimización del paquete web
Además, el paquete web tiene otro uso importante para la optimización del rendimiento de front-end.
Por ejemplo, depurar proyectos, acelerar el empaquetado y habilitar el empaquetado de subprocesos múltiples y extraer código común, la carga diferida y la actualización en caliente son todos métodos de optimización comúnmente usados en proyectos.
Por ejemplo, empaquetado de subprocesos múltiples. Webpack en sí es de un solo subproceso. Si el proyecto es lo suficientemente grande, la velocidad de empaquetado debe ser muy lenta. Además de mi computadora defectuosa, demora varios minutos. Si el subproceso múltiple está habilitado, se abrirán varios archivos de proyecto. Los hilos están empaquetados y la velocidad silba.
1rules:[
2 {
3 test: /\.js$/,
4 exclude:/node_modules/,
5 include: path.resolve('src'),
6 use: 'Happypack/loader?id=js' // 使用 happypack 的 loader 进行打包
7 },
8 {
9 test: /\.css$/,
10 // ......
11 }
12]
13
14plugins:[
15 //css
16 new Happypack({
17 id:'css',
18 }),
19 // js
20 new Happypack({
21 id:'js',
22 use:[{ // 插件配置
23 loader: 'babel-loader',
24 options: {
25 presets:[
26 '@babel/preset-env'
27 ]
28 }
29 }]
30 })
31})
Webpack también juega un papel clave en la optimización del rendimiento del front-end. Esto no solo puede usarse, sino que también debe entenderse para ser flexible en proyectos reales.
para resumir
El artículo de hoy es principalmente una introducción al paquete web. Después de todo, para los principiantes que son nuevos en el paquete web, es necesario comprender algunos conceptos, con estos conceptos básicos es fácil comenzar.
Estoy aquí por la alfabetización. Si hay alguna deficiencia en el artículo, puede dejar un mensaje para agregar y luego tomarse el tiempo para continuar compartiendo un paquete web para ver cómo es su principio de implementación interna.