1. Primero instale el nodo: en cmd: node -v para verificar si el nodo está instalado
node -v
2. Instalar menos: cnpm install -g less
cnpm install -g less
3. Compruebe si less se instaló correctamente: lessc -v
lessc -v
4. Una vez que la instalación sea exitosa, cree el archivo xx.less en el espacio de trabajo.

5. Compile menos en la consola, comando: lessc style.less style.css

lessc + nombre del archivo a compilar + nombre del archivo compilado en css
lessc style.less style.css

2. Utilice menos directamente en el navegador

Consejos amables

Este método debe utilizar el modo servidor para ejecutar el proyecto.

No se recomienda usarlo directamente en el front-end, se puede usar en el lado del servidor.

// 1.先安装一个服务器
cnpm install -g http-server
// 2.运行方式：在当前目录终端下执行
http-server
// Available on:
//  http://192.168.110.154:8080   
//  http://127.0.0.1:8080
// Hit CTRL-C to stop the server

Introducir archivos Less en el proyecto y analizar los archivos js de Less
<link rel="stylesheet/less" type="text/css" href="style.less" />
<script src="./less.min.js" ></script>

3.menos_variable

LESS permite definir variables utilizando el símbolo @ . La asignación de variables se realiza mediante dos puntos (:) .

El formato para declarar variables en LESS es "@nombre de variable: valor de variable"
@width: 1200px;
@height: 300px;


.container {
  width: @width;
  height: @height;
  background-color: #f1f1f1;
}
Selector utiliza variables

Los nombres de los selectores también se pueden declarar usando variables.
@my-selector: banner;


.@{my-selector} {
 font-weight: bold;
 line-height: 40px;
 margin: 0 auto;
}
La dirección URL utiliza variables.
@images: "../img";


body {
 color: #444;
 background: url("@{images}/hello.png");
}
Las variables se pueden utilizar primero en la declaración.
.container {
  width: @width;
  height: @height;
  background-color: #f1f1f1;
}


@width: 1200px;
@height: 300px;
atributos como variables

Las propiedades se tratan fácilmente como variables usando la sintaxis $prop. A veces esto puede hacer que tu código sea más fácil.
.widget {
  color: #efefef;
  background-color: $color;
  margin: 15px;
  padding: $margin;
  font-size: 30px;
  left:$font-size;
}

4.less_mix

Los mixins le permiten usar propiedades de una clase para otra clase e incluir el nombre de la clase como su propiedad
.p1 {
  color: red;
}


.p2 {
  background: #64d9c0;
  .p1();
}


.p3 {
  background: #DAA520;
  .p1;
}
// p1后面的括号可以省略不写
Paréntesis mixtos

Si desea crear un mixin, pero no desea que aparezca en su CSS, coloque paréntesis después de la definición del mixin.
.my-mixin {
  color: black;
}


.my-other-mixin() {
  background: white;
}


.class {
  .my-mixin();
  .my-other-mixin();
}
utilizado en la mezcla!important

Utilice la palabra clave !important después de una llamada mixin para marcar todas las propiedades que hereda como !important
.foo (@bg: #f5f5f5; @color: #900) {
  background: @bg;
  color: @color;
}


.unimportant {
  .foo();
}


.important {
  .foo() !important;
}
Mezclando con parámetros

Los mixins también pueden aceptar argumentos, que son variables que se pasan al bloque selector al mezclar
.border-radius(@radius,@color:red) {
// 声明变量的后面加：属性值  ,代表默认的属性
  border-radius: @radius;
  color: @color
}
#header {
  .border-radius(4px,blue);
// 返回值就是4px blue
}
.button {
  .border-radius(6px);
// 返回值:6px red
}

5. menos_anidación

Less ofrece la posibilidad de utilizar el anidamiento en lugar de, o junto con, la cascada

<div class="header">
        <div class="nav">
            <ul>
                <li>
                    <a href="#">首页</a>
                </li>
            </ul>
        </div>
</div>



// 使用less嵌套
.header{
    width: 100%;
    height: 70px;
    background-color: #f1f1f1;
    .nav{
        width: 1200px;
        margin: 20px auto;
        ul{
            overflow: hidden;
            clear: both;
            li{
                float: left;
                a{
                    font-size: 16px;
                    color: #999;
                    letter-spacing: 2px;
                }
            }
        }
    }
}


// 编码后等同于css中的：如下
.header {
  width: 100%;
  height: 70px;
  background-color: #f1f1f1;
}
.header .nav {
  width: 1200px;
  margin: 20px auto;
}
.header .nav ul {
  overflow: hidden;
  clear: both;
}
.header .nav ul li {
  float: left;
}
.header .nav ul li a {
  font-size: 16px;
  color: #999;
  letter-spacing: 2px;
}

Pseudo selectores usados con mixins

También puedes usar pseudo-selectores con mixins usando este método. Anulado como mixin ( & representa el padre del selector actual)

<div class="header">
        <div class="nav">
            <ul>
                <li>
                    <a href="#">首页</a>
                </li>
            </ul>
        </div>
</div>



// 使用less嵌套

@width:1200px;

.header{
    width: 100%;
    height: 70px;
    background-color: #f1f1f1;
    .nav{
        width: @width;
        margin: 20px auto;
        ul{
            overflow: hidden;
            clear: both;
            li{
                float: left;
                &:hover{
                    background-color:green;
                 }
                a{
                    font-size: 16px;
                    color: #999;
                    letter-spacing: 2px;
                }
            }
        }
    }
}


// 编码后等同于css中的：如下
.header {
  width: 100%;
  height: 70px;
  background-color: #f1f1f1;
}
.header .nav {
  width: 1200px;
  margin: 20px auto;
}
.header .nav ul {
  overflow: hidden;
  clear: both;
}
.header .nav ul li {
  float: left;
}
.header .nav ul li:hover {
  background-color: aquamarine;
}
.header .nav ul li a {
  font-size: 16px;
  color: #999;
  letter-spacing: 2px;
}

6. Menos_operación

Los operadores aritméticos +, -, *, / pueden operar con cualquier número, color o variable. Si es posible, los operadores aritméticos realizan conversiones de unidades antes de sumar, restar o comparar. El resultado calculado se basa en el tipo de unidad del operando más a la izquierda . Si la conversión de unidades no es válida o no tiene sentido, las unidades se ignoran

Nota: En la operación de división, el contenido de la operación debe colocarse entre paréntesis.
@size: 14px;
@widht:1000px;
@color:#333333;
@height:600px;

a{
    font-size: @size + 4;
    // 字体就成了18px
}

.nav{
    width: @widht - 200;
}

p{
    color: @color * 3;
}

.box{
    height: (@height / 2);
// 注意：除法的需要将运算的内容放到一个括号里
}
Equivalente a lo siguiente:
a {
  font-size: 18px;
}
.nav {
  width: 800px;
}
p {
  color: #999999;
}
.box {
  height: 300px;
}

7.less_escape

Escapar le permite utilizar cualquier cadena como propiedad o valor de variable. Cualquier contenido del formulario se generará tal cual ~"anything" . ~'anything'

Practica escapar de una consulta de medios

.box{
    background-color: #af3131;
}

@max768:~"screen and (max-width:768px)";
@min768:~"screen and (min-width:768px) and (max-width:992px)";
@min992:~"screen and (min-width:992px) ";

@media @max768 {
    .box1{
        .box;
    }
}
@media @min768 {
    .box2{
        background-color: blueviolet;
    }
}
@media @min992 {
    .box3{
        background-color: greenyellow;
    }
}

El efecto después de escapar es el siguiente:

.box {
  background-color: #af3131;
}
@media screen and (max-width:768px) {
  .box1 {
    background-color: #af3131;
  }
}
@media screen and (min-width:768px) and (max-width:992px) {
  .box2 {
    background-color: blueviolet;
  }
}
@media screen and (min-width:992px)  {
  .box3 {
    background-color: greenyellow;
  }
}

8.menos_función

Less tiene una variedad de funciones integradas para convertir colores, procesar cadenas, operaciones aritméticas, etc. Estas funciones se describen detalladamente en el manual de funciones Menos.

Dirección del manual de funciones : https://lesscss.org/functions/
@width:0.6;



.box1{
    width: percentage(@width);// 转化成百分比：60%;
}

.box2{
    height: ceil(96.8px);//向上取整：97px;
}

.box3{
    width: floor(96.8px);// 向下取整：96px;
}

9. menos_alcance

El alcance en Less es muy similar al alcance en CSS. Primero busque variables y mixins localmente; si no los encuentra, herede del alcance del nivel "principal"

@width:200px;


.box{
    .nav{
        @width: 100px;
        ul{
            li{
                a{
                    width: @width;  // retutn 100px,
                }
            }
        }

    }
}



.box1{
    .nav{
        ul{
            li{
                width: @width;  // return 200px;只能往父级寻找，不能往子级寻找
                a{
                    @widht:100px;
                }
            }
        }
    }
}




.box2{
    .nav{
        ul{
            li{
                a{
                    width: @width;  // retutn 300px,懒加载，也可以解释成先引用后声明;
                }
                @width:300px;
            }
        }
    }
}

10.less_annotations e importaciones

Comentario

Se pueden utilizar tanto comentarios de bloque como comentarios de línea.

/* 一个块注释
 * style comment! 
*/
@var: red;


// 这一行被注释掉了！
@var: white;




/* 
注释块内容
*/
@col :red;


// 注释行内容
@wid:100px;

importar

Puede importar un .less archivo y todas las variables de este archivo estarán disponibles. Si el archivo importado tiene .less una extensión, puede omitir la extensión

// style.less文件
@width:200px;
@height:50px;
@cor:green;


.box{
    width:@height;
    color: @cor;
}

// index.less文件
@import url("./style.less");// 引入的文件后缀名.less,后缀名可以省略


.box2{
    width: @width;
    height: 500px;
    color: @cor;
}

// index.less文件中引入 style.less文件 : @import url()
// 编译index.less文件后
.box {
  width: 50px;
  color: green;
}
.box2 {
  width: 200px;
  height: 500px;
  color: green;
}

2. descaro

1.Configuración del entorno Sass

sassRubyEstá desarrollado en función del lenguaje, por lo que sassRuby debe instalarse antes de la instalación. (Nota: ¡Ruby viene con Mac sin instalar Ruby!)

Instalar Rubí

Ruby下载地址: Descargas La manera fácil de instalar Ruby en Windows Este es un instalador autónomo basado en Windows que incluye el lenguaje Ruby, un entorno de ejecución, importante... https://rubyinstaller.org/downloads/

Una vez completada la instalación, debe probar si la instalación se realizó correctamente. Ejecute CMDel siguiente comando:

ruby -v
// ruby 3.1.2p20

rubígemas

RubyGems es similar a npm en Nodejs

Siempre ha sido muy difícil acceder a RubyGems en China. Necesitamos reemplazar su fuente por fuentes nacionales.

// 删除替换原gem源
gem sources --add https://gems.ruby-china.com/ --remove https://rubygems.org/


// 打印是否替换成功
gem sources -l
// https://gems.ruby-china.com/

instalación descarada

RubyViene con un RubyGemssistema llamado , que se utiliza para instalar Rubysoftware basado en . Podemos utilizar este sistema para instalar SassyCompass

// 安装如下(如mac安装遇到权限问题需加 sudo gem install sass)
gem install sass
gem install compass
// 检测是否安装成功
sass -v     // Ruby Sass 3.7.4
compass -v // Compass 1.0.3

2.Compile_sass

sassHay muchas formas de compilar, como el modo de compilación de línea de comandos, el software de compilación koala , las herramientas de ingeniería webpack, etc.

Escribir código descarado

El sufijo del archivo Sass es.scss
.box {
  width: 300px;
  height: 400px;


   &-title {
    height: 30px;
    line-height: 30px;
   }
}
Compilación de línea de comando
sass style.scss style.css

3.sass_variable

usar variables

sassUna característica importante que beneficia a las personas es cssla introducción de variables. Puede definir cssvalores de atributos utilizados repetidamente como variables y luego hacer referencia a ellos mediante nombres de variables sin tener que escribir el valor del atributo repetidamente. O, para un valor de atributo que solo se usa una vez, puede darle un nombre de variable fácil de entender para que las personas puedan conocer el propósito del valor del atributo de un vistazo.

sassUtilice símbolos para identificar variables. $

Como $highlight-colory $sidebar-width. ¿Por qué elegir $ símbolos? Debido a que es más fácil de reconocer, más hermoso y no tiene ningún otro uso en CSS, no causará cssconflictos con la sintaxis existente o futura .
$public-width:1226px;

.container{
    width: 100%;
}
.container .nav{
    width: $public-width;
    height: 50px;
    margin: 9px auto;
}

.computer{
    width: $public-width;
    height: 390px;
    background-color: #e9e966;
}
.phone{
    width: $public-width;
    height: 288px;
    background-color: #d6d;
}


// 编译后
.container {
  width: 100%; }

.container .nav {
  width: 1226px;
  height: 50px;
  margin: 9px auto; }

.computer {
  width: 1226px;
  height: 390px;
  background-color: #e9e966; }

.phone {
  width: 1226px;
  height: 288px;
  background-color: #d6d; }

/*# sourceMappingURL=style.css.map */
¿Los nombres de las variables deben estar separados por guiones o guiones bajos?

sassLos nombres de las variables en pueden cssser los mismos que los nombres de los atributos y los nombres de los selectores en , incluidos guiones y guiones bajos. Se trata de preferencias personales.
$link-color: blue;


a {
 color: $link_color;
}

4.sass_nested

cssSobrescribir selectores en el medio es muy molesto. Si desea escribir una lista larga de estilos que apunten a la misma parte de la página, a menudo necesitará escribir el mismo estilo una y otra vez.ID
#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }
Casos como este sassle permiten escribirlo solo una vez y hacer que el estilo sea más legible. En Sass, puedes anidar bloques de reglas dentro de bloques de reglas como una muñeca rusa. Le ayudará a manejar estas reglas anidadas durante sassla salida para evitar escrituras repetidas.css
#content {
 article {
  h1 { color: #333 }
  p { margin-bottom: 1.4em }
  }
 aside { background-color: #EEE }
}
：hoverEn la mayoría de los casos, este anidamiento simple está bien, pero en algunos casos no lo es, por ejemplo, si desea aplicar inmediatamente una pseudoclase similar dentro del selector anidado . Para abordar esta y otras situaciones, sassse proporciona una estructura especial. &
article a {
 color: blue;
  &:hover { color: red }
}
El combate real es el siguiente:
$public_width:1200px;
$public_color:#666;
$public_background:greenyellow;


// 嵌套
.header{
    width: 100%;
    .nav{
        width: $public_width;
        height: 50px;
        background-color: $public_background;
        ul{
            overflow: hidden;
            clear: both;
            li{
                float: left;
                &:hover{
                    background-color: $public_background;
                }
                a{
                    color: $public_color;
                }
            }
        }
    }
}

// 编译后

.header {
  width: 100%;
}

.header .nav {
  width: 1200px;
  height: 50px;
  background-color: greenyellow;
}

.header .nav ul {
  overflow: hidden;
  clear: both;
}

.header .nav ul li {
  float: left;
}

.header .nav ul li:hover {
  background-color: greenyellow;
}

.header .nav ul li a {
  color: #666;
}

/*# sourceMappingURL=style.css.map */

5. Importar archivos descarados

cssHay una característica particularmente poco común, @importlas reglas, que permiten que un cssarchivo importe otros cssarchivos. Sin embargo, la consecuencia es que @importel navegador descargará otros cssarchivos sólo cuando se ejecute, lo que hace que la página se cargue muy lentamente.

sassTambién existe una @importregla , pero la diferencia es que sassla @importregla cssimporta los archivos relevantes al generar el archivo. Esto significa que todos los estilos relacionados se agrupan en el mismo cssarchivo sin necesidad de iniciar solicitudes de descarga adicionales.

Las reglas utilizadas no necesitan especificar el nombre completo del archivo importado sass. @importPuede omitir .sasso .scsspresentar el sufijo

Valor de variable predeterminado

Normalmente, cuando declaras una variable repetidamente, solo la última declaración es válida y sobrescribe los valores anteriores.
$link-color: blue;
$link-color: red;


a {
    color: $link-color; // red
}
!default La función es reducir la prioridad del valor de la variable al más bajo.
$link-color: blue;
$link-color: red !default;


a {
    color: $link-color; // blue
}
Importaciones anidadas

A diferencia del nativo css, los comandos sasspueden escribirse en reglas.@importcss
// aside.scss
aside {
 background: blue;
 color: white;
}

// style.scss
.blue-theme {
    width:300px;
    @import "aside.scss"
}


// 编译后

.blue-thems{
    width:300px;
    .aside {
         background: blue;
         color: white;
    }
}

6. Anotaciones silenciosas

cssLas funciones de los comentarios incluyen ayudarlo a organizar estilos, permitirle comprender por qué lo escribe de esta manera cuando revise su código en el futuro y proporcionar instrucciones de estilo simples. Sin embargo, no desea que todos los que vean el código fuente de su sitio vean todos los comentarios.

sassSe proporciona una sintaxis de comentarios adicional que difiere del cssformato de comentarios estándar /* ... */, es decir, comentarios silenciosos, cuyo contenido no aparece en el cssarchivo generado. La sintaxis de los comentarios silenciosos es la misma que la de los comentarios de una sola línea en idiomas JavaScript``Javasimilares . Comienzan y continúan hasta el final de la línea.C//
// style.sass
/*  会出现在css样式文件中  */

// 静默注释：不会出现在css样式中


// style.css
// 编译后
@charset "UTF-8";
/*  会出现在css样式文件中  */

/*# sourceMappingURL=style.css.map */
De hecho, el contenido de los comentarios dentro cssdel formato de comentarios estándar /* ... */también se puede borrar en el cssarchivo generado. cssCuando aparecen comentarios en lugares que no están permitidos de forma nativa , como en cssatributos o selectores, sassno sabemos cómo generarlos en cssla ubicación correspondiente en el archivo correspondiente, por lo que estos comentarios se borran.
// 这样写就不会出现在css样式中

body {
  color /* 这块注释内容不会出现在生成的css中 */: #333;
}
El combate real es el siguiente:
/*  会出现在css样式文件中  */

// 静默注释：不会出现在css样式中

.header{
    background-color: greenyellow; /* 背景颜色*/
    color/* 字体颜色*/: #666;// 这样就不会出现在css样式中
    letter-spacing: 2px;// 字符间距
}
Después de la compilación --->
@charset "UTF-8";

/*  会出现在css样式文件中  */


.header {
    background-color: greenyellow;
    /* 背景颜色*/
    color: #666;
    letter-spacing: 2px;
}

/*# sourceMappingURL=style.css.map */

7. sass_mix

Si tiene varios estilos pequeños que son similares en todo su sitio web (como colores y fuentes consistentes), es una buena idea usar variables para manejar esta situación de manera uniforme. Pero cuando sus estilos se vuelven cada vez más complejos y necesita reutilizar grandes secciones de código de estilo, las variables independientes no pueden hacer frente a esta situación. Puedes sassreutilizar grandes secciones de estilos a través de mixins.
@mixin rounded-corners {
  border-radius: 5px;
}


.notice {
  background-color: green;
  border: 2px solid #00aa00;
  @include rounded-corners;
}
@mixin container {
    width: 100px;
    height: 50px;
    border: 1px solid #67e500;
    margin: 10px;
}


.root{
    padding-left: 20px;
    box-shadow: 0 5px 10px #e5e5e5;
    @include container;
}

// 编译后
.root {
  padding-left: 20px;
  box-shadow: 0 5px 10px #e5e5e5;
  width: 100px;
  height: 50px;
  border: 1px solid #67e500;
  margin: 10px; }

/*# sourceMappingURL=style.css.map */
parámetros mixtos

Mezclar no siempre tiene por qué producir el mismo estilo . El estilo exacto que genera un mixin se puede personalizar pasando @includeparámetros al mixin en ese momento .

Además, también podemos especificar el valor predeterminado del parámetro. Cuando no se pasa el parámetro, se puede utilizar el valor predeterminado.
@mixin content ($width,$height,$color:rgb(248, 153, 11)) {
    width: $width;
    height: $height;
    background-color: cornflowerblue;
    color: $color;
}

.box{
    margin: 10px;
    @include content(100px,256px ,#aecded)
}

.box2{
    border: 1px solid #999;
    border-radius: 15px;
    @include content(145px,40px);// 颜色没有传值，会使用默认颜色
}

// 编译后

.box {
  margin: 10px;
  width: 100px;
  height: 256px;
  background-color: cornflowerblue;
  color: #aecded;
}

.box2 {
  border: 1px solid #999;
  border-radius: 15px;
  width: 145px;
  height: 40px;
  background-color: cornflowerblue;
  color: #f8990b;
}

/*# sourceMappingURL=style.css.map */

8. Utilice la herencia del selector para optimizar CSS

Cuando se utiliza sass, la última característica importante para reducir la duplicación es la herencia del selector. Herencia de selector significa que un selector puede heredar todos los estilos definidos para otro selector. @extendEsto se logra mediante la sintaxis

Formas de reducir el código:

☛ definir variables;

☛ mezclar;

☛ herencia;
.container{
    width: 1226px;
    height: 480px;
    box-shadow: 0 5px 10px #e5e5e5;
    margin-left: 27.7px;
}

.root{
    padding-bottom: 23px;
    @extend .container;
}

.box{
    float: left;
    text-align: center;
    @extend .container;
}

.login_pwd{
    padding: 2px;
    letter-spacing: 3px;
    @extend .container;
}

// 编译后

.container, .root, .box, .login_pwd {
  width: 1226px;
  height: 480px;
  box-shadow: 0 5px 10px #e5e5e5;
  margin-left: 27.7px; }

.root {
  padding-bottom: 23px; }

.box {
  float: left;
  text-align: center; }

.login_pwd {
  padding: 2px;
  letter-spacing: 3px; }

/*# sourceMappingURL=style.css.map */
Principio de herencia

Por lo general, usar la herencia hará que el tuyo sea cssagradable y ordenado. Porque la herencia solo csscopiará el selector cuando se genere, no grandes secciones de csspropiedades.

9. Operación_Sass

Sass admite suma, resta, multiplicación y división de números ( +, -, *, /) y convierte valores entre diferentes unidades si es necesario.

Consejos amables

Durante la operación, diferentes unidades no participan en la operación.
$size:1000px;
.root{
  width: $size + 200px;
}
$size:1000px;
.root{
  width: $size - 200px;
}
$size:1000px;
.root{
  width: $size * 2;
}
$size:1000px;
.root{
  width: ($size / 2);
}
Prioridad en las operaciones

Los paréntesis se pueden utilizar para afectar el orden de las operaciones.
$size:1000px;
.root{
  width: ($size - 400) * 2;
}
Escenarios de aplicación

Durante la adaptación del terminal móvil, suele haber un cálculo REM.

Por ejemplo: la raíz font-sizees 50px, el valor dado por el diseñador es340rem
$fontREM:50;
.root{
  width:(340rem / $fontREM);
}

10. Comando de control

Sass proporciona algunos comandos de control básicos, como citar estilos cuando se cumplen ciertas condiciones o establecer un rango para repetir el formato de salida. Las instrucciones de control son una función avanzada que no se utiliza habitualmente en la programación diaria

@si

Cuando @if el valor de retorno de la expresión no es false o null , se establece la condición y el código en la salida { }
p {
  @if 1+1==2 {
    border: 1px solid;
   }
  @if 5 < 3 {
    border: 2px dotted;
   }
  @if null {
    border: 3px double;
   }
}
// return border:1px solid;
@para

@for Las instrucciones pueden repetir el formato de salida dentro de un rango limitado, realizando cambios en los resultados de salida cada vez según sea necesario (valores de variables).
@for $i from 1 through 3 {
  .item-#{$i} {
    width: 2px * $i;
   }
}


// return

.item-1 {
  width: 2px; }

.item-2 {
  width: 4px; }

.item-3 {
  width: 6px; }

/*# sourceMappingURL=style.css.map */

3. paquete web

1. Introducción al paquete web

Pensemos en una pregunta: cuando los proyectos front-end se hacen cada vez más grandes, ¿podemos seguir desarrollándonos de acuerdo con la forma de pensar anterior?

El meollo del problema: gestión de archivos, conversión de código ES6, empaquetado de proyectos...

Solución: Ingeniería front-end (Webpack)

ingeniería frontal

En el desarrollo de proyectos front-end a nivel empresarial, estandarizar las herramientas, tecnologías, procesos y experiencias necesarias para el desarrollo front-end.

Por ejemplo:

Construye un muro: Por más simple que sea, siempre que tengas todos los materiales listos, puedes hacerlo solo

Construir un edificio: Requiere muchas máquinas grandes y más gente, lo más importante es estandarizar el trabajo para evitar peligros.

Básicamente, webpack es una herramienta de agrupación de módulos estáticos para aplicaciones JavaScript modernas. Cuando webpack procesa una aplicación, crea internamente un gráfico de dependencia desde uno o más puntos de entrada y luego combina cada módulo requerido en su proyecto en uno o más paquetes, que son recursos estáticos para mostrar su contenido.

2. Cree un entorno Webpack

Instalar globalmente webpack
// 先判断有没有安装node.js
node -v

npm install --save [email protected]
npm install --save [email protected]
Cree una carpeta de proyecto local (se puede crear usando un comando o en el editor de código)
mkdir webpack_demo
cd webpack_demo
Inicializar proyecto
npm init
Después de ejecutar el comando de inicialización del proyecto, aparece lo siguiente: (Si no necesita configurarlo, puede presionar Enter directamente para omitirlo)

Instalar webpack localmente
npm install --save-dev [email protected]
npm install --save-dev [email protected]
usarwebpack

Crear estructura de proyecto: crear en la ruta del archivo webpack_demo src,public两个文件夹
// src/show.js
export function show(content) {
  window.document.getElementById('root').innerText = 'Hello,' + content;
}
// src/index.js
import { show } from './show.js'
show('iwen');
Ejecutando una orden:webpack

如果在终端执行webpack命令的时候出现以下情况：

Webpack-cli debe instalarse globalmente
// 安装全局webpack-cli
npm install webpack-cli -g
Si ocurre la situación anterior, significa que el paquete webpack se realizó correctamente y aparecerá en la ruta del archivo del proyecto : carpeta dist.

Consejos amables

Webpack buscará automáticamente el directorio src, luego buscará el archivo de entrada index.js, luego lo empaquetará y finalmente generará un directorio dist como contenido empaquetado.

publicCrear e introducir archivos index.htmlgenerados automáticamentemain.js
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="root"></div>
    <script src="../dist/main.js"></script>
</body>
</html>

3. Webpack agrega archivos de configuración

webpack Puede agregar archivos de configuración. Una vez que tenga el archivo de configuración, podrá operarlo más

Configuración de entrada

Cree webpack.config.jsun archivo en el directorio raíz del proyecto e ingrese el siguiente código
module.exports = {
 // JavaScript 执行入口文件
 entry: './src/index.js',
};
configuración de exportación

webpack.config.js Agregue el código de configuración de exportación al archivo
const path = require("path");

module.exports = {
    // 配置入口文件
    entry:"./src/index.js",
    // 配置出口文件
    output:{
        // 把所有依赖的模块合并输出到一个bundle.js文件
        filename:"bundle.js",
        // 把输入的文件都放到dist目录下
        // path.resolve:合并路径
        path:path.resolve(__dirname,"./dist"),
    }
}
Luego ejecutamos webpack el comando , y se ejecutará de forma predeterminada, webpack.config.js se ejecutará de acuerdo con el archivo de configuración.

4. Usando Loader en Webpack

Webpack solo puede comprender archivos JavaScript y JSON, que es la capacidad integrada de webpack disponible de fábrica. El cargador permite que webpack procese otros tipos de archivos (como archivos de tipo CSS, tipos de imágenes, etc.) y los convierta en módulos válidos para su uso.

Webpack trata todos los archivos como módulos y los archivos CSS no son una excepción, por lo que si desea empaquetar CSS, debe instalarlo.

css-loader 和 style-loader

Agregar archivos CSS

index.js Introducir archivos CSS en el archivo.
import "../src/css/index.css"
Cambio de configuracion

Modificar webpack.config.js archivo de configuración
const path = require("path");

module.exports = {
    module:{
        rules:[
            // 解析css文件
            {
                test:/\.css$/,
                use:['style-loader','css-loader']
             }
          ]
      }
}
Consejos amables

style-loadercss-loaderHay una secuencia de suma y debe escribirse primero y luego style-loaderescribirse.

css-loader

Instalar css-loader
npm install --save-dev [email protected]
Instalar style-loader
npm install --save-dev [email protected]

5. Utilice Loader_ para procesar menos archivos en Webpack

Instalar
Consejos amables:

Es necesario instalar dos paquetes, menos y menos cargador.
npm instal --save-dev [email protected] [email protected]
Cambio de configuracion

Modificar webpack.config.js archivo de configuración
const path = require('path');


module.exports = {
  module: {
    rules: [
        // 解析less文件
       { 
        test: /\.less$/, 
        use: ['style-loader', 'css-loader', 'less-loader'] 
       }
     ]
   }
};
Agregar less archivos al proyecto
import "../src/css/style.less"

6. Utilice Loader_ para procesar archivos Sass en Webpack

Quiero que webpack empaquete tipos de archivos scss\sass

Instalar
Consejos amables

Es necesario instalar dos paquetes, sass y sass-loader.
npm instal --save-dev [email protected] [email protected]
Cambio de configuracion

Modificar webpack.config.js archivo de configuración
module.exports = {
  module: {
    rules: [
        // 解析sass文件
       { 
        test: /\.(scss|sass)$/, 
        use: ['style-loader', 'css-loader', 'sass-loader'] 
       }
     ]
   }
};
Agregar scss archivos al proyecto
import "../src/css/style.scss"

7. Uso de complementos en complementos Webpack_HTML

html-webpack-plugin Puede ayudarnos srca copiar index.htmluna copia al directorio raíz del proyecto.

Instalar
npm install [email protected] --save-dev
Configurar complemento
const HtmlPlugin = require('html-webpack-plugin')


module.exports = {
// 解析html文件
  plugins: [
    new HtmlPlugin({
      template: './src/index.html', // 指定源文件的存放路径
      filename: './index.html' // 指定生成的文件的存放路径
     })
   ]
};
Consejos amables

Automáticamente colocará el paquete.js empaquetado en la parte inferior de index.html.

8. Webpack separa archivos CSS

El paquete actual es empaquetar JavaScript y CSS en un archivo al mismo tiempo. Si el CSS es pequeño, en realidad es una ventaja, pero si el CSS es grande, entonces este archivo debe extraerse por separado.

Podemos separar CSS usando mini-css-extract-plugin

Instalar
npm install --save-dev [email protected]
Modificar archivo de configuración
const minicssextractPlugin = require("mini-css-extract-plugin")

module.exports = {
    module:{
        rules:[
            // 解析css文件
            {
                test:/\.css$/,
                use:[minicssextractPlugin.loader,'css-loader']
            },
            // 解析less文件
            {
                test:/\.less$/,
                use:[minicssextractPlugin.loader,"css-loader","less-loader"]
            },
            // 解析sass文件
            {
                test:/\.(sass|scss)$/,
                use:[minicssextractPlugin.loader,"css-loader","sass-loader"]
            }
        ]
    },
    
    plugins:[
        // 分离CSS文件
        new minicssextractPlugin({
            filename:"./css/index.css"
        })
    ]
}
Consejos amables

mini-css-extract-plugin Conflictos y deben eliminarsestyle-loaderstyle-loader

`9.`Webpack comprime archivos CSS

Los archivos CSS separados mini-css-extract-plugin no se han comprimido, por lo que debemos comprimirlos por separado ¿Cómo hacerlo?

Instalar

optimize-css-assets-webpack-plugin Comprimir archivos CSS por

npm/cnpm install --save-dev [email protected]
// 我刚开始使用npm安装，报错了，但是使用cnpm就没事

Modificar archivo de configuración

const minicssextractPlugin = require("mini-css-extract-plugin")
const optimizecssassetswebpackPlugin = require("optimize-css-assets-webpack-plugin")

module.exports = {
    module:{
        rules:[
            // 解析css文件
            {
                test:/\.css$/,
                use:[minicssextractPlugin.loader,'css-loader']
            },
            // 解析less文件
            {
                test:/\.less$/,
                use:[minicssextractPlugin.loader,"css-loader","less-loader"]
            },
            // 解析sass文件
            {
                test:/\.(sass|scss)$/,
                use:[minicssextractPlugin.loader,"css-loader","sass-loader"]
            }
        ]
    },
    
    plugins:[
        // 分离CSS文件
        new minicssextractPlugin({
            filename:"./css/index.css"
        }),
        // 压缩CSS文件
        new optimizecssassetswebpackPlugin()
    ]
}

10.Configurar Babel en Webpack

En este punto, muchos amigos pueden encontrar un problema: ¿por qué el código ES6 que escribimos ahora se ejecuta normalmente?

Esto se debe a que el navegador que utilizamos actualmente Chrome lo admite de forma predeterminada, pero ¿qué pasa si algunos navegadores no lo admiten?

Necesito babel compilar usando

Instalar
npm install --save-dev @babel/[email protected]
npm install --save-dev @babel/[email protected]
npm install --save-dev [email protected]
Agregue el archivo de configuración "babel.config.js"

Archivos de configuración agregados en el directorio raíz del proyecto. babel.config.js
// babel.config.js
module.exports = {
  presets: ['@babel/preset-env']
}
Modificar archivo de configuración
module: {
    rules: [
        // 使用babel将ES6语法转化成ES5语法
       {
        test:/\.js$/,
        use:['babel-loader']
       },
     ]
}

11.Modo en Webpack

Proporciona mode opciones de configuración que le indican al paquete web que utilice las optimizaciones integradas para el modo apropiado.
'none'| 'development' | 'production'
Opciones describir

desarrollo Establecerá el valor en DefinePlugin Habilita nombres válidos para módulos y fragmentos.process.env.NODE_ENVdevelopment

producción establecerá el valor DefinePlugin en . Habilite nombres deterministas ofuscados para módulos y fragmentos, , , y .process.env.NODE_ENVproductionFlagDependencyUsagePluginFlagIncludedChunksPluginModuleConcatenationPluginNoEmitOnErrorsPluginTerserPlugin

ninguno No utilice ninguna opción de optimización predeterminada

Hay dos formas de implementar el modo:

Primero: simplemente proporcione mode las opciones en el objeto de configuración.
module.exports = {
 mode: 'development',
};
El segundo tipo: Pasado desde los parámetros CLI (es decir, especificando el modo en el comando ingresado en la terminal)

paquete web --modo=desarrollo

Opciones	describir
desarrollo	Establecerá el valor en `DefinePlugin` Habilita nombres válidos para módulos y fragmentos.`process.env.NODE_ENVdevelopment`
producción	establecerá el valor `DefinePlugin` en . Habilite nombres deterministas ofuscados para módulos y fragmentos, , , y .`process.env.NODE_ENVproductionFlagDependencyUsagePluginFlagIncludedChunksPluginModuleConcatenationPluginNoEmitOnErrorsPluginTerserPlugin`
ninguno	No utilice ninguna opción de optimización predeterminada

12.Usando DevServer en Webpack

Hasta ahora se puede utilizar normalmente webpack , pero en el desarrollo real es posible que necesite:

Proporcionar servicio HTTP en lugar de utilizar la vista previa de archivos locales;

Supervise los cambios de archivos y actualice automáticamente la página web para lograr una vista previa en tiempo real;

Admite Source Map para facilitar la depuración.

Para estos, Webpack se ha encargado de ello por usted. Webpack admite de forma nativa los puntos 2 y 3 anteriores y, combinado con la herramienta de desarrollo oficial DevServer, también puede lograr fácilmente el punto 1. DevServer iniciará un servidor HTTP para atender solicitudes de páginas web y también ayudará a iniciar Webpack, recibir señales de cambio de archivos enviadas por Webpack y actualizar automáticamente la página web a través del protocolo WebSocket para lograr una vista previa en tiempo real.

Instalar dependencias del servidor
npm install -g [email protected]
npm install --save-dev [email protected]
// 使用npm安装报错，改成cnpm就好了
Modificar archivo de configuración
const path = require('path');


module.exports = {
  devServer: {
    // 服务器打开目录
    static: path.join(__dirname, 'public'),
    // 开启压缩
    compress: true,
    // 设置端口
    port: 9000,
    // 热更新
    hot: true,
    // 自动打开浏览器
    open: true,
    //使用 History 路由模式时，若404错误时被替代为 index.html
    historyApiFallback: true
   }
};
const path = require("path");
const htmlPlugin = require("html-webpack-plugin")
const minicssextractPlugin = require("mini-css-extract-plugin")
const optimizecssassetswebpackPlugin = require("optimize-css-assets-webpack-plugin")

module.exports = {
    // 开发模式：development    生产模式：production
    // mode:"development",
    // 配置入口文件
    entry:"./src/index.js",
    // 配置出口文件
    output:{
        // 把所有依赖的模块合并输出到一个bundle.js文件
        filename:"bundle.js",
        // 把输入的文件都放到dist目录下
        // path.resolve:合并路径
        path:path.resolve(__dirname,"./dist"),
    },
    module:{
        rules:[
            // 解析css文件
            {
                test:/\.css$/,
                use:[minicssextractPlugin.loader,'css-loader']
            },
            // 解析less文件
            {
                test:/\.less$/,
                use:[minicssextractPlugin.loader,"css-loader","less-loader"]
            },
            // 解析sass文件
            {
                test:/\.(sass|scss)$/,
                use:[minicssextractPlugin.loader,"css-loader","sass-loader"]
            },
            // 使用babel将ES6语法转化成ES5语法
            {
                test:/\.js$/,
                use:["babel-loader"]
            }
        ]
    },
    
    plugins:[
        // 解析HTML文件
        new htmlPlugin({
            template:"./public/index.html",// 指定html文件存放路径
            filename:"./index.html"// 指定生成文件存放的路径
        }),
        // 分离CSS文件
        new minicssextractPlugin({
            filename:"./css/index.css"
        }),
        // 压缩CSS文件
        new optimizecssassetswebpackPlugin()
    ],

    devServer:{
        // 服务器打开目录
        static:path.join(__dirname,"public"),
        // 压缩
        compress:true,
        // 端口
        port:9000,
        // 实时更新
        hot:true,
        // 自动打开浏览器
        open:true,
        // 使用history路由模式，若404报错时被代替为index.html
        historyApiFallback:true
    }
}
Cómo funciona el servidor

webpack serve

webpack-dev-server

Consejos amables

Cuando se modifica el archivo de configuración, la actualización en caliente no es posible y es necesario reiniciar el servidor. La actualización en caliente solo se aplica al código restante. src

13. Configurar el plan de ejecución rápida.

Configurar el esquema de ejecución rápida puede facilitarnos unificar el método de ejecución; de lo contrario, necesitaremos recordar más palabras clave como: webpack, webpack serve, webpack-dev-serveretc.

enmienda

Configurar en package.json _scripts
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start":"webpack --mode=production",
    "dev":"webpack-dev-server --mode=development"
  },
Consejos amables

Si package.json no se encuentra en el archivo , puede regenerar el archivo scripts ejecutando npm init package.json

Modo de operación
npm start  // 相当于运行webpack
npm run dev // 相当于运行webpack serve

14. Separación del modo de desarrollo y modo de producción.

Durante el proceso de desarrollo, generalmente distinguimos entre entornos de desarrollo:

entorno de desarrollo
entorno de prueba
Entorno de producción
...

modo de desarrollo

El modo de desarrollo existe para hacer que el desarrollo sea más conveniente para los desarrolladores. En el modo de desarrollo, generalmente es para una depuración más conveniente, por lo que el mensaje de error será muy completo y habrá un estado de actualización en caliente, etc.

modo de producción

El modo de producción existe para el empaquetado del proyecto y el lanzamiento en línea. En el modo de producción, se eliminarán más mensajes de error para que el paquete sea lo más pequeño posible, etc.

`webpack` Configurar el modo de desarrollo y el modo de producción.

En webpack , podemos distinguir entre modo de desarrollo y modo de producción, por ejemplo, mode existe una diferencia development entre production

Dependencias de instalación:

webpack-merge Se puede utilizar para fusionar varios archivos de configuración:

npm install --save-dev [email protected]
// npm安装报错，使用cnpm不报错

Crear archivos de esquema de desarrollo y producción.

Crear y archivar en el directorio raíz del proyecto. webpack.dev.config.js webpack.prod.config.js


// webpack.dev.config.js   开发环境
const path = require("path")
const {merge} = require("webpack-merge")
const webpackConfig = require("./webpack.config")


const devConfig = {
    mode:"production",
    devServer:{
        // 服务器打开目录
        static:path.join(__dirname,"public"),
        // 压缩
        compress:true,
        // 端口
        port:9000,
        // 实时更新
        hot:true,
        // 自动打开浏览器
        open:true,
        // 使用history路由模式，若404报错时被代替为index.html
        historyApiFallback:true
    }
}

module.exports = merge(webpackConfig,devConfig)



// webpack.prod.config.js  生产环境
const {merge} = require("webpack-merge")
const webpackConfig = require("./webpack.config")



const prodConfig = {
    mode:"production"
}

module.exports = merge(webpackConfig,prodConfig)

// webpack.config.js

const path = require("path");
const htmlPlugin = require("html-webpack-plugin")
const minicssextractPlugin = require("mini-css-extract-plugin")
const optimizecssassetswebpackPlugin = require("optimize-css-assets-webpack-plugin")

const webpackConfig = {
    // 开发模式：development    生产模式：production
    // mode:"development",
    // 配置入口文件
    entry:"./src/index.js",
    // 配置出口文件
    output:{
        // 把所有依赖的模块合并输出到一个bundle.js文件
        filename:"bundle.js",
        // 把输入的文件都放到dist目录下
        // path.resolve:合并路径
        path:path.resolve(__dirname,"./dist"),
    },
    module:{
        rules:[
            // 解析css文件
            {
                test:/\.css$/,
                use:[minicssextractPlugin.loader,'css-loader']
            },
            // 解析less文件
            {
                test:/\.less$/,
                use:[minicssextractPlugin.loader,"css-loader","less-loader"]
            },
            // 解析sass文件
            {
                test:/\.(sass|scss)$/,
                use:[minicssextractPlugin.loader,"css-loader","sass-loader"]
            },
            // 使用babel将ES6语法转化成ES5语法
            {
                test:/\.js$/,
                use:["babel-loader"]
            }
        ]
    },
    
    plugins:[
        // 解析HTML文件
        new htmlPlugin({
            template:"./public/index.html",// 指定html文件存放路径
            filename:"./index.html"// 指定生成文件存放的路径
        }),
        // 分离CSS文件
        new minicssextractPlugin({
            filename:"./css/index.css"
        }),
        // 压缩CSS文件
        new optimizecssassetswebpackPlugin()
    ],

    devServer:{
        // 服务器打开目录
        static:path.join(__dirname,"public"),
        // 压缩
        compress:true,
        // 端口
        port:9000,
        // 实时更新
        hot:true,
        // 自动打开浏览器
        open:true,
        // 使用history路由模式，若404报错时被代替为index.html
        historyApiFallback:true
    }
}

module.exports = webpackConfig;

Reconfigure el modo de ejecución: (en el archivo package.json)

"scripts": {
  "start": "webpack --config webpack.prod.config.js",
  "dev": "webpack-dev-server --config webpack.dev.config.js"
}

15. Devtool en Webpack mejora el proceso de depuración

Podemos devtool configurar el proceso de depuración mejorado mediante

Configurando devtool: "mapa fuente"

Mapa fuente

El mapa fuente es un archivo de información que almacena la información de ubicación antes y después de la compresión del código.

Es decir, la información de ubicación del código original se puede mostrar directamente durante la depuración en lugar de la información comprimida, lo que facilita enormemente la depuración posterior.

El mapa fuente generado de forma predeterminada en el entorno de desarrollo registra la ubicación del código generado. Causará el problema de que el número de líneas del error informado en tiempo de ejecución no coincide con el número de líneas del código fuente.

Solución: agregue la siguiente configuración a webpack.dev.config.js para garantizar que la cantidad de líneas de error durante el tiempo de ejecución sea consistente con la cantidad de líneas en el código fuente.
// webpack.dev.config.js   开发环境
const path = require("path")
const {merge} = require("webpack-merge")
const webpackConfig = require("./webpack.config")


const devConfig = {
    // 开发模式
    mode:"development",
    //此选项生成的 Source Map 能保证运行时的报错行数与源代码的行数保持一致
    devtool:"source-map",
    devServer:{
        // 服务器打开目录
        static:path.join(__dirname,"public"),
        // 压缩
        compress:true,
        // 端口
        port:9000,
        // 实时更新
        hot:true,
        // 自动打开浏览器
        open:true,
        // 使用history路由模式，若404报错时被代替为index.html
        historyApiFallback:true
    }
}

module.exports = merge(webpackConfig,devConfig)
// webpack.prod.config.js  生产环境
const {merge} = require("webpack-merge")
const webpackConfig = require("./webpack.config")



const prodConfig = {
    // 生产模式
    mode:"production",
    // 隐藏错误，不进行提示
    devtool:"hidden-nosources-source-map"
}

module.exports = merge(webpackConfig,prodConfig)
Mejores prácticas para mapas fuente

En modo desarrollo

Se recomienda establecer directamente el valor de devtool en source-map, que puede localizar directamente la línea de error específica.

En ambiente de producción

Se recomienda desactivar Source Map o configurar devtool hidden-nosources-source-mappara evitar la fuga de código fuente y mejorar la seguridad del sitio web.

16. Descripción del archivo .browserslistrc

El archivo browserslistrc es para indicar la compatibilidad del navegador del proyecto actual.

Hay tres formas de utilizarlo:

establecido en paquete.json

Establecer como un archivo de configuración separado

Algunos complementos requieren restablecer la lista de navegadores

Nos referimos a la configuración del entorno del proyecto Vue, elegimos el segundo método y lo configuramos como un archivo de configuración independiente.

.browserslistrc Cree un archivo en el directorio raíz del proyecto.
> 1%  // 兼容市场上占有率超过1%的浏览器(世界级)
last 2 versions // 兼容浏览器最近的两个版本
not dead // 不支持24个月内没有官方支持或者更新的浏览器
not ie 11 // 不支持ie 11

17. postcss-loader maneja la compatibilidad con CSS

Postcss es una herramienta para convertir estilos de JavaScript. Esta herramienta puede manejar problemas de compatibilidad con CSS . Es esta herramienta la que puede agregar algunos prefijos compatibles al código CSS que escribimos.

cnpm install --save-dev [email protected]
cnpm install --save-dev [email protected]
cnpm isntall --save-dev [email protected]
cnpm install --save-dev [email protected]

postcss.config.js Cree un archivo en el directorio raíz del proyecto.

// postcss.config.js
module.exports = {
  plugins: {
    "autoprefixer":{
      "overrideBrowserslist":[
        // 兼容IE7以上浏览器
        "ie >= 8",
        // 兼容火狐版本号大于3.5浏览器
        "Firefox >= 3.5",
        // 兼容谷歌版本号大于35浏览器,
        "chrome  >= 35"
       ]
     }
   }
}

Modificar archivos webpack.config.js

rules: [
   {
    test: /\.css$/,
    use:[MiniCssExtractPlugin.loader ,"css-loader","postcss-loader"]
   },
   {
    test: /\.less$/,
    use:[MiniCssExtractPlugin.loader ,"css-loader","postcss-loader","less-loader"]
   },
   {
    test: /\.(scss|sass)$/,
    use:[MiniCssExtractPlugin.loader ,"css-loader","postcss-loader","sass-loader"]
   }
]

#root{
    color: greenyellow;
    display: flex;
}

como sigue:

Se reportó un error

Ejecutar en una terminal en el directorio raíz donde se ejecuta el proyecto: cnpm install

Luego reinicie el entorno de desarrollo en el directorio raíz donde se ejecuta el proyecto: npm run dev y se ejecutará.

18. Webpack crea el entorno React

Actualmente, React y Vue, los dos marcos front-end más utilizados, utilizan Webpack para crear proyectos.

A continuación, utilizamos webpack el entorno para construir un proyecto React.

Instalar
cnpm install -D @babel/[email protected]
cnpm install -S [email protected]
cnpm install -S [email protected]
Agregar archivo de configuración

La sintaxis utilizada por React es jsxsintaxis, por lo que necesitamos configurar jsxel módulo de análisis.
// 解析react文件
{
  test: /\.(js|jsx)$/,
  exclude: /node_modules/,
  loader: 'babel-loader'
}
Al mismo tiempo necesitamos modificar el archivo.babel.config.js
module.exports = {
  presets: [
    '@babel/preset-env',
    "@babel/preset-react"
   ]
}
Escribiendo código de reacción
import React from 'react'
import ReactDom from 'react-dom'


class App extends React.Component {
  render(){
    return (
      <div style={
    
    {color:"#333"}}>
         Hello
      </div>
     )
   }
}
ReactDom.render(<App/>,document.getElementById("root"))
Finalmente, ejecute el entorno de desarrollo ( npm run dev ): el entorno del proyecto de reacción está configurado

19. Webpack crea un entorno Vue

Actualmente, React y Vue, los dos marcos front-end más utilizados, utilizan Webpack para crear proyectos.

A continuación, webpack construimos un entorno de proyecto Vue usando

Instalar

Cuando se trata de archivos específicos de Vue .vue, necesitamos ayuda del paquete para analizarlos.
cnpm install --save [email protected] 
cnpm install --save-dev [email protected] 
cnpm install --save-dev [email protected]
cnpm install --save-dev [email protected] 
cnpm install --save-dev [email protected]
Agregar archivo de configuración

en el archivowebpack.config.js
const { VueLoaderPlugin } = require('vue-loader')


const baseConf = {
  module:{
       {
      test: /\.vue$/,
      use: ['vue-loader']
        }
    },
  plugins:[
    new VueLoaderPlugin()
   ]
}
Escribir código Vue
// index.js
import { createApp } from 'vue'
import App from './App.vue'


createApp(App).mount('#root')
// App.vue
<template>
 <p>Vue文件环境测试</p>
</template>


<script>
export default {
 
}
</script>


<style>
p{
 color: red;
}
</style>

20.Procesamiento de imágenes de paquete web

En Webpack todo es un módulo y las imágenes no son una excepción, también debemos tratarlas por separado.

Instalar

El procesamiento de imágenes se realiza mediante url-loader file-loader
cnpm install --save-dev [email protected]

cnpm install --save-dev [email protected]
Agregar configuración ( webpack.config.js )
{
  test: /\.(png|svg|jpe?g|gif)$/i,
    use: {
      loader:"url-loader",
        options:{
          // 阈值，小于20 * 1024kb，进行base64转码
           limit:20 * 1024,
          // img/存放路径 [name]:图片名字 [hash:8]:hash8位 [ext]:后缀
             name:"img/[name].[hash:8].[ext]"
         }
     }
}
Luego agregue imágenes a los archivos en el directorio src

En este punto, puedes agregar una imagen con un efecto de 20 * 1024 kb y probarla.

Consejos amables

Si la imagen mide más de 20 * 1024 kb, debe instalarla file-loader
npm install --save-dev [email protected]
Ya no necesita realizar operaciones adicionales para importar archivos de más de 20 * 1024 kb y copiarlos directamente al dist/img/ directorio.

Nota especial

Los iconos de fuentes aquí también son identificables, lo que también es una ventaja de la versión Webpack5: se procesa todo a la vez.

21. Proxy proxy en Webpack (de hecho, es un problema entre dominios)

Al realizar solicitudes de red, el problema más común en el front-end es el dominio cruzado, que se puede manejar en el front-end y back-end respectivamente.

Interfaz

JSONP (requiere soporte del lado del servidor)

proxy proxy (modo de desarrollo)

extremo posterior

cors

Instalar esquema de solicitud de red
cnpm install --save-dev [email protected]
Agregar configuración

Agregar configuraciónwebpack.dev.config.js
devServer:{
  proxy: {
    //定义一个标记，如以后api开头的请求都走代理的设置
    '/api': {
      // 要请求的真实服务端基地址 相当于被/api替代了
      target: 'http://iwenwiki.com',
      //把api重写为空，因为别人没有 /api
      pathRewrite: { 
        "^/api": "" 
       },
      //发送请求头中host会设置成target
      changeOrigin: true
     }
   }
}
// App.vue
<template>
 <p>Vue文件环境测试</p>
 <img src="./assets/1.jpg" alt="">
</template>


<script>
import axios from "axios"


export default {
 mounted(){
    axios.get("/api/api/FingerUnion/list.php").then(res =>{
        console.log(res.data);
    })
 }
}
</script>


<style>
p{
 color: red;
}
</style>
De esta forma, se puede obtener información y resolver problemas entre dominios.

22. Limpiar automáticamente el dist

Para limpiar automáticamente los archivos en el directorio dist cada vez que se empaqueta y publica (para evitar que se conserven archivos antiguos)

Se pueden instalar complementosclean-webpack-plugin

Instalar
cnpm install --save-dev [email protected]
Configuración del complemento
// webpack.prod.config.js
const commonConfig = require("./webpack.config");
const { merge } = require("webpack-merge");
const { CleanWebpackPlugin } = require('clean-webpack-plugin')


const cleanPlugin = new CleanWebpackPlugin()


const prodConfig = {
  mode: 'production',
  devtool: 'nosources-source-map',
  plugins: [cleanPlugin]
}


module.exports = merge(commonConfig, prodConfig)

23.Optimización del paquete web

Ha habido muchas operaciones anteriores en Webpack para la optimización de Webpack, tales como: separar los entornos de desarrollo y producción, separar y comprimir el código CSS, agregar y optimizar la devtool depuración de los entornos de desarrollo y producción, etc.

A continuación, presentaremos algunas soluciones de optimización:

Especificar el área de procesamiento de documentos

Verifique el tamaño del archivo y solucione los que sean demasiado grandes.

Especificar el área de procesamiento de documentos

Hay muchos archivos js en el proyecto, especialmente en node_modulescarpetas, pero lo que debemos manejar son los que están srcen el directorio.

Entonces necesitamos especificar el área.
 {
   test: /\.js$/,
   use: ['babel-loader'],
   // 包含只处理 src 目录下的文件
   include: path.resolve(__dirname, 'src'),
 }
Verifique el tamaño del archivo y solucione los que sean demasiado grandes.

webpack-bundle-analyzer Es un artefacto de análisis de empaquetado, su interfaz también es clara y puede dar intuitivamente el tamaño de cada archivo empaquetado y sus respectivas dependencias, lo que puede ayudarnos a analizar el proyecto de manera más conveniente.

Instalar:
cnpm install --save-dev webpack-bundle-analyzer
Agregar configuración:
// webpack.dev.config.js  开发环境


const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');


module.exports = {
 plugins: [
  new BundleAnalyzerPlugin({
   analyzerPort: 8888, // 指定端口号
   openAnalyzer: false,
   })
  ]
}

24. Inspección de código en JavaScript

Una cosa muy importante para un equipo de front-end son las especificaciones del código, solo con las especificaciones del código se puede garantizar la calidad del código.

Herramientas comunes de especificación de código front-end:

JSLint

JSHint

ESLint

Por supuesto, somos los primeros en recomendar aquí ESLint y también lo integraremos en el paquete web de seguimiento. ESLint

JSLint

Ventajas: La configuración ya la establece el experto, lista para usar desde el primer momento

defecto:

Opciones de configuración limitadas, muchas reglas no se pueden desactivar

Las normas son estrictas y cualquiera que no se ajuste a lo que el veterano considera un buen estilo recibirá una advertencia.

Poca escalabilidad

No se puede localizar la regla correspondiente según el error

JSHint

ventaja:

Hay muchos parámetros que se pueden configurar.

Archivos de configuración de soporte para un uso fácil

Admite algunas bibliotecas de clases comunes

Soporta básicoES6

defecto:

No se admiten reglas personalizadas

No se puede localizar la regla correspondiente según el error

ESLint

ventaja:

Las reglas predeterminadas incluyen JSLintreglas JSHintque son fáciles de migrar.

Se puede configurar en 警告dos 错误niveles o desactivar directamente

Admite extensión de complemento

Las reglas se pueden personalizar.

Las reglas correspondientes se pueden ubicar en función de los errores.

apoyoES6

La única JSXherramienta compatible

defecto:

Se requiere alguna configuración personalizada (porque es demasiado flexible, pero la documentación es muy detallada)

Lento (es más lento que los otros dos)

25.Configurar ESLint en Webpack

Para unificar y estandarizar los hábitos de codificación del equipo y reducir el riesgo de errores de código, eslint se ha convertido en una herramienta esencial para proyectos front-end.

En pocas palabras, escribir código debe seguir ciertas especificaciones, y en cuanto a cuáles son las especificaciones, podemos definirlas nosotros mismos.

Sitio web oficial de ESLint

Encuentre y solucione problemas en su código JavaScript - ESLint - Linter JavaScript conectable Una herramienta linter conectable y configurable para identificar e informar sobre patrones en JavaScript. Mantenga la calidad de su código con facilidad. https://eslint.org/

instalar dependencias
cnpm install [email protected] [email protected] --save-dev
archivo de configuración del paquete web ( webpack.dev.config.js )
// webpack.dev.config.js 文件中
const ESLintPlugin = require('eslint-webpack-plugin');


module.exports = {
 plugins: [new ESLintPlugin()],
};
.eslintrc.jsAgregar nuevos archivos en el directorio raíz
module.exports = {
  env: {
    node: true,
    browser: true,
    es6: true,
   },
  // 支持ES6并不代表支持所有ES6新语法， 设置为 "module" 支持 ECMAScript 模块
  parserOptions: {
    sourceType: 'module'
   },
  rules: {
    // JS文件中不支持console.log()
    'no-console': 2
   },
};
Especificaciones comunes de ESLint

"no-alert": 0, //Deshabilita el uso del mensaje de confirmación de alerta

"no-array-constructor": 2, // Deshabilita el uso del constructor de matrices

"no-bitwise": 0,//Deshabilitar el uso de operadores bit a bit

"no-caller": 1,//Está prohibido utilizar arguments.caller o arguments.callee

"no-catch-shadow": 2, // Prohibir los parámetros de la cláusula catch con el mismo nombre que las variables de alcance externo

"no-class-assign": 2, //Está prohibida la asignación a clases

"no-cond-assign": 2,// Prohibir el uso de declaraciones de asignación en expresiones condicionales

"no-console": 2,//Desactivar el uso de la consola

"no-const-assign": 2,//Está prohibido modificar las variables declaradas por const

"no-constant-condition": 2,//Prohibir el uso de expresiones constantes en condiciones if(true) if(1)

"no-continue": 0,//Está prohibido continuar

"no-control-regex": 2,//Prohibir el uso de caracteres de control en expresiones regulares

"no-debugger": 2, // Deshabilita el uso del depurador

"no-delete-var": 2,//El operador de eliminación no se puede utilizar en variables declaradas por var

"no-div-regex": 1,//No se pueden usar expresiones regulares que parezcan división /=foo/

"no-dupe-keys": 2,//No permitir claves duplicadas {a:1,a:1} al crear objetos literales

"no-dupe-args": 2, // Los parámetros de función no se pueden repetir

"no-duplicate-case": 2, //las etiquetas de los casos en el conmutador no se pueden repetir

"no-else-return": 2, // Si hay retorno en la declaración if, no puede ir seguido de una declaración else.

"no-empty": 2, //El contenido de la declaración de bloque no puede estar vacío

"no-empty-character-class": 2, //El contenido [] en la expresión regular no puede estar vacío

"no-empty-label": 2,//No permitir el uso de etiquetas vacías

"no-eq-null": 2,//Está prohibido utilizar el operador == o != para nulo

"no-eval": 1, //Deshabilita el uso de eval

"no-ex-assign": 2, // Prohibir asignar valores a los parámetros de excepción en la declaración catch

"no-extend-native": 2,//Prohibir extender objetos nativos

"no-extra-bind": 2, //Deshabilita el enlace de funciones innecesarias

"no-extra-boolean-cast": 2, //Deshabilita la conversión booleana innecesaria

"no-extra-parens": 2, // prohibir paréntesis innecesarios

"no-extra-semi": 2, // prohibir dos puntos adicionales

"no-fallthrough": 1, //Deshabilita la penetración del interruptor

"no-floating-decimal": 2,//Está prohibido omitir 0,5 en números de coma flotante 3.

"no-func-assign": 2,//Está prohibida la declaración de función repetida

"no-implicit-coercion": 1, // Deshabilitar la conversión implícita

"no-implied-eval": 2, //Deshabilita el uso de evaluación implícita

"no-inline-comments": 0, //Deshabilitar comentarios en línea

"no-inner-declarations": [2, "functions"], //No permitir el uso de declaraciones (variables o funciones) en declaraciones de bloque

"no-invalid-regexp": 2, // prohibir expresiones regulares no válidas

"no-invalid-this": 2, // Prohibir esto no válido, solo se puede usar en constructores, clases y objetos literales

"no-irregular-whitespace": 2,//No puede haber espacios irregulares

"no-iterator": 2,//Está prohibido utilizar el atributo iterador

"no-label-var": 2, //el nombre de la etiqueta no puede ser el mismo que el nombre de la variable declarada por var

"no-labels": 2, //Deshabilitar declaración de etiqueta

"no-lone-blocks": 2,//Deshabilitar bloques anidados innecesarios

"no-lonely-if": 2, // Prohibir solo la declaración if en la declaración else

"no-loop-func": 1,//Está prohibido utilizar funciones en bucles (si no se hace referencia a variables externas y no se forma ningún cierre)

"no-mixed-requires": [0, false], // Los tipos de declaración no se pueden mezclar al declarar

"no-mixed-spaces-and-tabs": [2, false],//Está prohibido mezclar tabulaciones y espacios

"estilo de salto de línea": [0, "windows"], //estilo de salto de línea

"no-multi-spaces": 1,//No se pueden usar espacios adicionales

"no-multi-str": 2,//Las cadenas no pueden usar \ saltos de línea

"no-multiple-empty-lines": [1, {"max": 2}], //Las líneas vacías no pueden exceder 2 líneas como máximo

"no-native-reassign": 2,//No se puede reescribir el objeto nativo

"no-negated-in-lhs": 2, //¡el lado izquierdo del operador in no puede tener!

"no-nested-ternary": 0,//Deshabilita el uso de operaciones ternarias anidadas

"no-new": 1, // Está prohibido usar new para construir una instancia sin asignar un valor

"no-new-func": 1,//Prohibir el uso de nuevas funciones

“no-new-object”: 2,//Prohibido el uso de new Object()

"no-new-require": 2, //Deshabilita el uso de nuevo require

"no-new-wrappers": 2, // Prohibir el uso de new para crear instancias de contenedor, new String new Boolean new Number

"no-obj-calls": 2,//No se pueden llamar objetos globales integrados, como Math() JSON()

"no-octal": 2, //No permitir el uso de números octales

"no-octal-escape": 2, //Deshabilita el uso de secuencias de escape octal

"no-param-reassign": 2,//Prohibir reasignar parámetros

"no-path-concat": 0, // el nombre de directorio o el nombre de archivo no se pueden usar para la concatenación de rutas en el nodo

"no-plusplus": 0,//Está prohibido usar ++, –

"no-process-env": 0,// Prohibir el uso de Process.env

“no-process-exit”: 0,//Uso prohibido process.exit()

"no-proto": 2,//Está prohibido utilizar el atributo proto

"no-redeclare": 2, // Está prohibida la declaración repetida de variables

"no-regex-spaces": 2,//No permitir el uso de múltiples espacios en literales de expresiones regulares /foo bar/

"no-restricted-modules": 0, // Si el módulo especificado está deshabilitado, se informará un error al usarlo.

"no-return-assign": 1,//No puede haber una expresión de asignación en la declaración de devolución

"no-script-url": 0, //No permitir el uso de javascript: void(0)

"no-self-compare": 2,//no se puede comparar a sí mismo

"no-sequences": 0,//Está prohibido utilizar el operador de coma

"no-shadow": 2, //Una variable en el ámbito externo no puede tener el mismo nombre que una variable o parámetro en el ámbito que contiene

"no-shadow-restricted-names": 2, // Los identificadores restringidos especificados en modo estricto no se pueden usar como nombres de variables cuando se declaran

"no-spaced-func": 2,//No puede haber un espacio entre el nombre de la función y () al llamar a la función

"no-sparse-arrays": 2, // Los arreglos dispersos están prohibidos, [1,2]

"no-sync": 0,//nodejs prohíbe los métodos de sincronización

"no-ternary": 0, //Deshabilita el uso de operadores ternarios

"no-trailing-spaces": 1,//Sin espacios después del final de una línea

"no-this-before-super": 0, // no puedo usar esto o super antes de llamar a super()

"no-throw-literal": 2,//Prohibir lanzar errores literales

"error"; "no-undef": 1, // no puede tener variables indefinidas

"no-undef-init": 2, // Cuando la variable se inicializa, no se puede asignar directamente a indefinido

"no-undefinido": 2, // no se puede usar undefinido

"no-unexpected-multiline": 2, // evita expresiones multilínea

"no-underscore-dangle": 1, // los identificadores no pueden comenzar ni terminar con _

"no-unneeded-ternary": 2,//Prohibir anidamiento innecesario var isYes = respuesta === 1 ?true : false;

"no-unreachable": 2, // no puede tener código inalcanzable

"no-unused-expressions": 2,//Deshabilitar expresiones inútiles

"no-unused-vars": [2, {"vars": "all", "args": "after-used"}], //No puede haber variables o parámetros que no se hayan utilizado después de la declaración

"no-use-before-define": 2,//No se puede usar antes de que esté definido

"no-useless-call": 2,//Prohibir llamadas innecesarias y aplicar

"no-void": 2, //Deshabilitar operador de anulación

"no-var": 0, //Desactiva var, usa let y const en su lugar

“no-warning-comments”: [1, { “terms”: [“todo”, “fixme”, “xxx”], “location”: “start” }],//No puede haber comentarios de advertencia

"no-with": 2,//Desactivar con

"array-bracket-spacing": [2, "never"], //Si se permiten espacios adicionales en matrices no vacías

"arrow-parens": 0,//Las funciones de flecha están entre paréntesis

"espaciado de flechas": 0, //=> antes/después de corchetes

"pares de acceso": 0, // usa getter/setter en el objeto

"block-scoped-var": 0, //Usar var en declaraciones de bloque

"brace-style": [1, "1tbs"],//Estilo de llaves

"callback-return": 1,//Evita llamar a devoluciones de llamada varias veces o algo así

"camelcase": 2, // forzar el nombramiento de casos de camellos

"comma-dangle": [2, "never"], //Los objetos literales no pueden tener comas al final

"espaciado de coma": 0, // espacios antes y después de la coma

"estilo coma": [2, "último"], // estilo coma, ya sea al principio o al final de la línea al ajustar

"complejidad": [0, 11], // Complejidad cíclica

"computed-property-spacing": [0, "never"], //Si los nombres de clave calculados están permitidos o no

"consistent-return": 0, //Si se permite la omisión después del retorno

“consistente-esto”: [2, “eso”],//esto别名

"constructor-super": 0,// Las clases no derivadas no pueden llamar a super, las clases derivadas deben llamar a super

"curly": [2, "all"],//Debe usar {} en if(){}

"default-case": 2, //la declaración de cambio debe tener default al final

"dot-location": 0,//La ubicación del descriptor de acceso del objeto, ya sea al principio o al final de la línea al ajustar

"dot-notation": [0, { "allowKeywords": true }], // evita corchetes innecesarios

"eol-last": 0, //El archivo termina con una sola nueva línea

"eqeqeq": 2, //Debe usar congruencia "func-names": 0,//La expresión de función debe tener un nombre

"func-style": [0, "declaración"], // estilo de función, que estipula que solo se pueden usar declaraciones de función/expresiones de función

"generator-star-spacing": 0, // espacios antes y después de la función generadora *

"guard-for-in": 0, //el bucle for in debe filtrarse mediante la instrucción if

"handle-callback-err": 0,//nodejs maneja errores

"id-length": 0, // longitud del nombre de la variable

"sangría": [2, 4],//estilo de sangría

"init-declarations": 0,//Se debe asignar un valor inicial al declarar

"key-spacing": [0, { "beforeColon": false, "afterColon": true }], // espacio antes y después de los dos puntos en el objeto literal

"lines-around-comment": 0,//Comentarios antes/después de la línea

"profundidad máxima": [0, 4],//Profundidad del bloque anidado

"max-len": [0, 80, 4],//Longitud máxima de la cadena

"max-nested-callbacks": [0, 2],//Profundidad de anidamiento de devolución de llamada

"max-params": [0, 3], //La función solo puede tener hasta 3 parámetros

"max-statements": [0, 10], //El número máximo de declaraciones dentro de la función

"new-cap": 2,// La primera línea del nombre de la función en letras mayúsculas debe llamarse usando el nuevo método, y la primera línea del nombre de la función en letras minúsculas debe llamarse sin el nuevo método.

"new-parens": 2, // se deben agregar paréntesis cuando sea nuevo

"newline-after-var": 2,//Si se requiere una línea en blanco después de la declaración de la variable

"object-curly-spacing": [0, "never"], //Si se permiten espacios innecesarios entre llaves

"object-shorthand": 0, // Forzar la sintaxis de abreviatura literal del objeto

"one-var": 1,//Declaración continua

"asignación de operador": [0, "siempre"],//Operador de asignación += -= o algo así

"operator-linebreak": [2, "after"],//Al dividir una línea, si el operador está al final o al principio de la línea

"padded-blocks": 0, // Si se requieren líneas en blanco al principio y al final de la línea en la declaración de bloque

"prefer-const": 0,//const preferida

"prefer-spread": 0, //Operación de expansión preferida

"prefer-reflect": 0,//Método de reflexión preferido

"comillas": [1, "única"],//tipo de cotización`` ""''

"quote-props":[2, "always"],//Si el nombre del atributo en el objeto literal debe estar entre comillas dobles

"radix": 2, //parseInt debe especificar el segundo parámetro "id-match": 0, //detección con nombre

"require-yield": 0, //La función generadora debe tener rendimiento "semi": [2, "always"], //La declaración debe terminar con punto y coma

“semiespaciado”: [0, {“antes”: falso, “después”: verdadero}], //espacios antes y después del punto y coma

"sort-vars": 0, //Ordenar cuando se declaran variables

"espacio-después-de-palabras clave": [0, "siempre"],//si hay un espacio después de la palabra clave

"space-before-blocks": [0, "always"], //Bloques que no comienzan con una nueva línea {debe haber un espacio delante de ellos

"space-before-function-paren": [0, "always"],// Al definir una función, ¿debe haber un espacio antes del paréntesis?

“space-in-parens”: [0, “never”],//¿Debería haber espacios entre paréntesis?

"space-infix-ops": 0,//Si debe haber espacios alrededor del operador infijo

"space-return-throw-case": 2, // ¿Necesita agregar un espacio después del caso de retorno?

“space-unary-ops”: [0, { “words”: true, “nonwords”: false }],//Si se deben agregar espacios antes o después de los operadores unarios

"spaced-comment": 0, //¿Quieres que el estilo del comentario tenga espacios o algo así?

"estricto": 2,//Usar modo estricto

"use-isnan": 2, // Deshabilita el uso de NaN al comparar, solo se puede usar isNaN ()

"valid-jsdoc": 0,//reglas jsdoc

"valid-typeof": 2,//Debe utilizar el valor de tipo legal

"vars-on-top": 2, //var debe colocarse en la parte superior del alcance

"wrap-iife": [2, "inside"], //Estilo entre paréntesis de ejecución inmediata de expresiones de función

"wrap-regex": 0,//Los literales de expresiones regulares están entre paréntesis

"yoda": [2, "never"]//Prohibir condiciones de expresión

Es difícil para los individuos formular especificaciones grandes y completas. En este momento, podemos tomar prestadas soluciones maduras de grandes empresas y luego modificarlas ligeramente de acuerdo con la situación del proyecto. Aquí citamos a Airbnb.

Instalar Airbnbdependencias de reglas
cnpm install [email protected]  [email protected] --save-dev
Utilizado en el archivo de configuración de eslintAirbnb
module.exports = {
  env: {
    node: true,
    browser: true,
    es6: true,
   },
  // 支持ES6并不代表支持所有ES6新语法， 设置为 "module" 支持 ECMAScript 模块
  parserOptions: {
    sourceType: 'module'
   },
  extends: "airbnb-base",
  rules: {
    // JS文件中不支持console.log()
    'no-console': 2
   },
};
Al escribir código no estándar en este momento, encontrará que se han agregado muchas reglas nuevas, lo que requiere que las corrijamos una por una.

less, sass, webpack (ingeniería front-end)

1. Menos

1. Configurar el menor entorno

1. Primero instale el nodo: en cmd: node -v para verificar si el nodo está instalado

2. Instalar menos: cnpm install -g less

3. Compruebe si less se instaló correctamente: lessc -v

4. Una vez que la instalación sea exitosa, cree el archivo xx.less en el espacio de trabajo.

5. Compile menos en la consola, comando: lessc style.less style.css

lessc + nombre del archivo a compilar + nombre del archivo compilado en css

2. Utilice menos directamente en el navegador

Consejos amables

Este método debe utilizar el modo servidor para ejecutar el proyecto.

No se recomienda usarlo directamente en el front-end, se puede usar en el lado del servidor.

Introducir archivos Less en el proyecto y analizar los archivos js de Less

3.menos_variable

LESS permite definir variables utilizando el símbolo @ . La asignación de variables se realiza mediante dos puntos (:) .

El formato para declarar variables en LESS es "@nombre de variable: valor de variable"

Selector utiliza variables

La dirección URL utiliza variables.

Las variables se pueden utilizar primero en la declaración.

atributos como variables

4.less_mix

Paréntesis mixtos

utilizado en la mezcla!important

Mezclando con parámetros

5. menos_anidación

Pseudo selectores usados ​​con mixins

6. Menos_operación

7.less_escape

8.menos_función

9. menos_alcance

10.less_annotations e importaciones

Comentario

importar

2. descaro

1.Configuración del entorno Sass

Instalar Rubí

rubígemas

instalación descarada

2.Compile_sass

Escribir código descarado

Compilación de línea de comando

3.sass_variable

usar variables

¿Los nombres de las variables deben estar separados por guiones o guiones bajos?

4.sass_nested

5. Importar archivos descarados

Valor de variable predeterminado

Importaciones anidadas

6. Anotaciones silenciosas

7. sass_mix

parámetros mixtos

8. Utilice la herencia del selector para optimizar CSS

Principio de herencia

9. Operación_Sass

Prioridad en las operaciones

Escenarios de aplicación

10. Comando de control

@si

@para

3. paquete web

1. Introducción al paquete web

2. Cree un entorno Webpack

3. Webpack agrega archivos de configuración

Configuración de entrada

configuración de exportación

4. Usando Loader en Webpack

Agregar archivos CSS

Cambio de configuracion

Instalar css-loader

Instalar style-loader

5. Utilice Loader_ para procesar menos archivos en Webpack

Instalar

Cambio de configuracion

6. Utilice Loader_ para procesar archivos Sass en Webpack

Instalar

Cambio de configuracion

7. Uso de complementos en complementos Webpack_HTML

Instalar

Configurar complemento

utilizado en la mezcla`!important`

Pseudo selectores usados con mixins

Instalar `css-loader`

Instalar `style-loader`

`mini-css-extract-plugin` Conflictos y deben eliminarse`style-loaderstyle-loader`

`9.`Webpack comprime archivos CSS

Si `package.json` no se encuentra en el archivo , puede regenerar el archivo `scripts` ejecutando `npm init` `package.json`

`webpack` Configurar el modo de desarrollo y el modo de producción.

`.eslintrc.js`Agregar nuevos archivos en el directorio raíz

Instalar `Airbnb`dependencias de reglas

Utilizado en el archivo de configuración de eslint`Airbnb`