less、sass、webpack（前端工程化）

目录

一、Less

1.配置less环境

1.先要安装node：在cmd中：node -v检查是否安装node

2.安装less :cnpm install -g less

3.检查less是否安装成功：lessc -v

4.安装成功后，在工作区创建xx.less文件

5.在控制台编译less,命令：lessc style.less style.css

     lessc + 需要编译的文件名 + 编译成css的文件名

 2.浏览器中直接使用less

温馨提示

此种方式必须用服务器方式运行项目

不推荐直接在前端使用，可以在服务器端使用

 在项目中引入Less文件与解析Less的js文件

3.less_变量 

LESS允许使用 @ 符号定义变量。 变量分配使用冒号(:)完成。

LESS中声明变量的格式为“@变量名：变量值”

选择器使用变量

Url地址使用变量

变量可以先使用在声明

属性当作变量

4.less_混合 

混合添加括号

混合中使用!important

带参数的混合

5.less_嵌套

伪选择器与混合一同使用

 6.Less_运算

 7.less_转义

 8.less_函数

9. less_作用域

 10.less_注释与导入

注释

导入

 二、Sass

1.Sass环境搭建

安装Ruby

RubyGems

sass安装

2.编译_sass

编写Sass代码

命令行编译

3.sass_变量 

使用变量

变量名用中划线还是下划线分隔

4.sass_嵌套

5.导入sass文件

默认变量值

嵌套导入

6.静默注释

7.sass_混合 

混合传参

8.使用选择器继承来精简CSS

继承原理

9.Sass_运算

运算中的优先级

应用场景

10.控制指令

@if

@for

三、Webpack

 1.Webpack简介

2.搭建 Webpack环境

3.Webpack增加配置文件

入口配置

出口配置

4.Webpack中使用Loader

增加CSS文件

修改配置

安装 css-loader

安装 style-loader

5.Webpack中使用Loader_处理Less文件

安装

修改配置

6.Webpack中使用Loader_处理Sass文件

安装

修改配置

7.Webpack中使用插件_HTML插件

安装

配置插件

8.Webpack分离CSS文件

安装

温馨提示

mini-css-extract-plugin 与 style-loader 冲突，需要删除 style-loader

9.Webpack压缩CSS文件

安装

修改配置文件

10.Webpack中配置Babel

安装

增加配置文件"babel.config.js"

修改配置文件

11.Webpack中模式（Mode）

实现模式(Mode)有两种方式：

12.Webpack中使用DevServer

安装服务器依赖

修改配置文件

服务器运行方式

13.配置快捷运行方案

修改方案

温馨提示

如果在 package.json 文件中，并没有找到 scripts ,可以通过执行 npm init 重新生成 package.json 文件

运行方式

14.开发模式与生产模式分离

开发模式

生产模式

webpack 配置开发模式和生产模式

15.Webpack中devtool增强调试过程

Source Map

Source Map 的最佳实践

16. .browserslistrc文件说明

17.postcss-loader处理css兼容

​编辑

18.Webpack构建React环境

安装

增加配置文件

编写React代码

19.Webpack构建Vue环境

安装

增加配置文件

编写Vue代码

20.Webpack图片处理

安装

增加配置(webpack.config.js)

21.Webpack中Proxy代理 （其实就是跨域的问题）

安装网络请求方案

增加配置

22.自动清理dist

安装

插件的配置

23.Webpack优化

规定文件处理区域

查看文件大小，过大的着手处理

安装：

增加配置：

24.JavaScript中的代码检查

JSLint

JSHint

ESLint

25.Webpack中配置ESLint

安装依赖

webpack配置文件（ webpack.dev.config.js）

根目录下新增.eslintrc.js文件

安装Airbnb规则依赖

eslint配置文件中使用Airbnb

---

一、Less

1.配置less环境

1.先要安装node：在cmd中：node -v检查是否安装node

node -v

2.安装less :cnpm install -g less

cnpm install -g less

3.检查less是否安装成功：lessc -v

lessc -v

4.安装成功后，在工作区创建xx.less文件

5.在控制台编译less,命令：lessc style.less style.css

     lessc + 需要编译的文件名 + 编译成css的文件名

lessc style.less style.css

 2.浏览器中直接使用less

温馨提示

此种方式必须用服务器方式运行项目

不推荐直接在前端使用，可以在服务器端使用

// 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  

 在项目中引入Less文件与解析Less的js文件

<link rel="stylesheet/less" type="text/css" href="style.less" />
<script src="./less.min.js" ></script>

3.less_变量 

LESS允许使用 @ 符号定义变量。 变量分配使用冒号(:)完成。

LESS中声明变量的格式为“@变量名：变量值”

@width: 1200px;
@height: 300px;.container {width: @width;height: @height;background-color: #f1f1f1;
}

选择器使用变量

选择器的名字也可以使用变量声明

@my-selector: banner;.@{my-selector} {font-weight: bold;line-height: 40px;margin: 0 auto;
}

Url地址使用变量

@images: "../img";body {color: #444;background: url("@{images}/hello.png");
}

变量可以先使用在声明

.container {width: @width;height: @height;background-color: #f1f1f1;
}@width: 1200px;
@height: 300px;

属性当作变量

使用$prop语法可以很容易地将属性当作变量来处理。有时，这可以使您的代码更轻松

.widget {color: #efefef;background-color: $color;margin: 15px;padding: $margin;font-size: 30px;left:$font-size;
}

4.less_混合 

混合允许您将一个类的属性用于另一个类，并且包含类名作为其属性

.p1 {color: red;
}.p2 {background: #64d9c0;.p1();
}.p3 {background: #DAA520;.p1;
}
// p1后面的括号可以省略不写

混合添加括号

如果你想创建一个混合，但是你不希望这个混合出现在你的CSS中，在混合定义后面加圆括号

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

混合中使用!important

在混合调用后使用!important关键字将它继承的所有属性标记为!important

.foo (@bg: #f5f5f5; @color: #900) {background: @bg;color: @color;
}.unimportant {.foo();
}.important {.foo() !important;
}

带参数的混合

混合也可以接受参数，这些参数是混合时传递给选择器块的变量

.border-radius(@radius,@color:red) {
// 声明变量的后面加：属性值  ,代表默认的属性border-radius: @radius;color: @color
}
#header {.border-radius(4px,blue);
// 返回值就是4px blue
}
.button {.border-radius(6px);
// 返回值:6px red
}

5.less_嵌套

Less 提供了使用嵌套（nesting）代替层叠或与层叠结合使用的能力

<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;
}

伪选择器与混合一同使用

你还可以使用此方法将伪选择器与混合一同使用。重写为一个混合 (& 表示当前选择器的父级）

<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.Less_运算

算术运算符 +、-、*、/ 可以对任何数字、颜色或变量进行运算。如果可能的话，算术运算符在加、减或比较之前会进行单位换算。计算的结果以最左侧操作数的单位类型为准。如果单位换算无效或失去意义，则忽略单位

注意：在除法运算的时候，需要将运算的内容放到一个小括号里面

@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);
// 注意：除法的需要将运算的内容放到一个括号里
}

等同于，如下：

a {font-size: 18px;
}
.nav {width: 800px;
}
p {color: #999999;
}
.box {height: 300px;
}

 7.less_转义

转义（Escaping）允许你使用任意字符串作为属性或变量值。任何 ~"anything" 或 ~'anything' 形式的内容都将按原样输出

练习做一个媒体查询的转义

.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;}
}

转义后的效果如下：

.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.less_函数

Less 内置了多种函数用于转换颜色、处理字符串、算术运算等。这些函数在Less 函数手册中有详细介绍

函数手册地址：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. less_作用域

Less 中的作用域与 CSS 中的作用域非常类似。首先在本地查找变量和混合，如果找不到，则从“父”级作用域继承

@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_注释与导入

注释

块注释和行注释都可以使用

/* 一个块注释* style comment! 
*/
@var: red;// 这一行被注释掉了！
@var: white;/* 
注释块内容
*/
@col :red;// 注释行内容
@wid:100px;

导入

你可以导入一个 .less 文件，此文件中的所有变量就可以全部使用了。如果导入的文件是 .less 扩展名，则可以将扩展名省略掉

// 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;
}

 二、Sass

1.Sass环境搭建

sass基于Ruby语言开发而成，因此安装sass前需要安装Ruby。（注:mac下自带Ruby无需在安装Ruby!）

安装Ruby

Ruby下载地址：DownloadsThe easy way to install Ruby on Windows This is a self-contained Windows-based installer that includes the Ruby language, an execution environment, important...https://rubyinstaller.org/downloads/

安装完成后需测试安装有没有成功,运行CMD输入以下命令：

ruby -v
// ruby 3.1.2p20

RubyGems

RubyGems 类似 Nodejs中的 npm

RubyGems 一直以来在国内都非常难访问到，我们需要将他的源替换国内的

// 删除替换原gem源
gem sources --add https://gems.ruby-china.com/ --remove https://rubygems.org/// 打印是否替换成功
gem sources -l
// https://gems.ruby-china.com/

sass安装

Ruby自带一个叫做RubyGems的系统，用来安装基于Ruby的软件。我们可以使用这个系统来 轻松地安装Sass和Compass

// 安装如下(如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.编译_sass

sass编译有很多种方式，如命令行编译模式、编译软件koala 、工程化工具webpack等

编写Sass代码

Sass文件的后缀名为.scss

.box {width: 300px;height: 400px;&-title {height: 30px;line-height: 30px;}
}

命令行编译

sass style.scss style.css

3.sass_变量 

使用变量

sass让人们受益的一个重要特性就是它为css引入了变量。你可以把反复使用的css属性值 定义成变量，然后通过变量名来引用它们，而无需重复书写这一属性值。或者，对于仅使用过一 次的属性值，你可以赋予其一个易懂的变量名，让人一眼就知道这个属性值的用途

sass使用    $ 符号来标识变量

比如$highlight-color和$sidebar-width。为什么选择$ 符号呢？因为它好认、更具美感，且在CSS中并无他用，不会导致与现存或未来的css语法冲突

$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 */

变量名用中划线还是下划线分隔

sass的变量名可以与css中的属性名和选择器名称相同，包括中划线和下划线。这完全取决于个人的喜好

$link-color: blue;a {color: $link_color;
}

4.sass_嵌套

css中重复写选择器是非常恼人的。如果要写一大串指向页面中同一块的样式时，往往需要 一遍又一遍地写同一个ID

#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }

像这种情况，sass可以让你只写一遍，且使样式可读性更高。在Sass中，你可以像俄罗斯套娃那样在规则块中嵌套规则块。sass在输出css时会帮你把这些嵌套规则处理好，避免你的重复书写。

#content {article {h1 { color: #333 }p { margin-bottom: 1.4em }}aside { background-color: #EEE }
}

大多数情况下这种简单的嵌套都没问题，但是有些场景下不行，比如你想要在嵌套的选择器 里边立刻应用一个类似于：hover的伪类。为了解决这种以及其他情况，sass提供了一个特殊结 构      &  

article a {color: blue;&:hover { color: red }
}

实战如下：

$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.导入sass文件

css有一个特别不常用的特性，即@import规则，它允许在一个css文件中导入其他css文件。然而，后果是只有执行到@import时，浏览器才会去下载其他css文件，这导致页面加载起来特别慢。

sass也有一个@import规则，但不同的是，sass的@import规则在生成css文件时就把相关文件导入进来。这意味着所有相关的样式被归纳到了同一个css文件中，而无需发起额外的下载请求。

使用sass的@import规则并不需要指明被导入文件的全名。你可以省略.sass或.scss文件后缀

默认变量值

一般情况下，你反复声明一个变量，只有最后一处声明有效且它会覆盖前边的值

$link-color: blue;
$link-color: red;a {color: $link-color; // red
}

!default 作用，是将这次变量值的优先级降到最低

$link-color: blue;
$link-color: red !default;a {color: $link-color; // blue
}

嵌套导入

跟原生的css不同，sass允许@import命令写在css规则内

// 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.静默注释

css中注释的作用包括帮助你组织样式、以后你看自己的代码时明白为什么这样写，以及简单的样式说明。但是，你并不希望每个浏览网站源码的人都能看到所有注释。

sass另外提供了一种不同于css标准注释格式/* ... */的注释语法，即静默注释，其内容不会出现在生成的css文件中。静默注释的语法跟JavaScript``Java等类C的语言中单行注释的语法相同，它们以  //  开头，注释内容直到行末

// style.sass
/*  会出现在css样式文件中  */// 静默注释：不会出现在css样式中// style.css
// 编译后
@charset "UTF-8";
/*  会出现在css样式文件中  *//*# sourceMappingURL=style.css.map */

实际上，css的标准注释格式/* ... */内的注释内容亦可在生成的css文件中抹去。当注释出现在原生css不允许的地方，如在css属性或选择器中，sass将不知如何将其生成到对应css文件中的相应位置，于是这些注释被抹掉

// 这样写就不会出现在css样式中body {color /* 这块注释内容不会出现在生成的css中 */: #333;
}

实战如下：

/*  会出现在css样式文件中  */// 静默注释：不会出现在css样式中.header{background-color: greenyellow; /* 背景颜色*/color/* 字体颜色*/: #666;// 这样就不会出现在css样式中letter-spacing: 2px;// 字符间距
}

编译后 --->

@charset "UTF-8";/*  会出现在css样式文件中  */.header {background-color: greenyellow;/* 背景颜色*/color: #666;letter-spacing: 2px;
}/*# sourceMappingURL=style.css.map */

7.sass_混合 

如果你的整个网站中有几处小小的样式类似（例如一致的颜色和字体），那么使用变量来统一处理这种情况是非常不错的选择。但是当你的样式变得越来越复杂，你需要大段大段的重用样式的代码，独立的变量就没办法应付这种情况了。你可以通过sass的混合实现大段样式的重用

@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 */

混合传参

混合并不一定总得生成相同的样式。可以通过在@include时给混合传参，来定制混合生成的精确样式。

并且，我们还可以指定参数默认值，当参数不传递的时候，可以使用默认值

@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.使用选择器继承来精简CSS

使用sass的时候，最后一个减少重复的主要特性就是选择器继承。选择器继承是说一个选择器可以继承为另一个选择器定义的所有样式。这个通过@extend语法实现

减少代码的方法：

☛ 定义变量；

☛ 混合；

☛ 继承；

.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 */

继承原理

通常使用继承会让你的css美观、整洁。因为继承只会在生成css时复制选择器，而不会复制大段的css属性。

9.Sass_运算

Sass支持数字的加减乘除等运算 (+, -, *, /)，如果必要会在不同单位间转换值

温馨提示

运算过程中，不同单位不要参与运算

$size:1000px;
.root{width: $size + 200px;
}

$size:1000px;
.root{width: $size - 200px;
}

$size:1000px;
.root{width: $size * 2;
}

$size:1000px;
.root{width: ($size / 2);
}

运算中的优先级

圆括号可以用来影响运算的顺序

$size:1000px;
.root{width: ($size - 400) * 2;
}

应用场景

在移动端适配的时候，通常会有REM计算

例如：根 font-size为 50px, 设计师给的数值是340rem

$fontREM:50;
.root{width:(340rem / $fontREM);
}

10.控制指令

Sass提供了一些基础的控制指令，比如在满足一定条件时引用样式，或者设定范围重复输出格式。控制指令是一种高级功能，日常编写过程中并不常用到

@if

当 @if 的表达式返回值不是 false 或者 null 时，条件成立，输出 {  } 内的代码

p {@if 1+1==2 {border: 1px solid;}@if 5 < 3 {border: 2px dotted;}@if null {border: 3px double;}
}
// return border:1px solid;

@for

@for 指令可以在限制的范围内重复输出格式，每次按要求（变量的值）对输出结果做出变动。

@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 */

三、Webpack

 1.Webpack简介

我们思考一个问题：当前端项目越来越大的时候，我们还能按照以往的思维方式继续开发么

问题症结所在：文件管理、ES6代码的转换、项目的打包...

解决方案：前端工程化(Webpack)

前端工程化

在企业级的前端项目开发中，把前端开发所需的工具、技术、流程、经验等进行规范化、标准化

例如：

砌一堵墙：怎么简单怎么来，只要材料准备齐全，一个人直接干就行

盖一栋楼：需要很多大型机器，也需要更多的人，重要的必须要规范化干活，避免发生危险

本质上，webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个依赖图，然后将你项目中所需的每一个模块组合成一个或多个 bundles，它们均为静态资源，用于展示你的内容

2.搭建 Webpack环境

安装全局 webpack

// 先判断有没有安装node.js
node -vnpm install --save webpack@5.73.0
npm install --save webpack-cli@4.10.0

创建本地项目文件夹（可以使用命令，也可以在代码编辑器中创建）

mkdir webpack_demo
cd webpack_demo

初始化项目

npm init

执行初始化项目命令后出现如下：（如果不需要设置的话，直接可以回车键跳过）

安装 webpack 到本地

npm install --save-dev webpack@5.73.0
npm install --save-dev webpack-cli@4.10.0

使用webpack

创建项目结构：在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');

执行命令：webpack

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

需要将webpack-cli安装成全局  

// 安装全局webpack-cli
npm install webpack-cli -g

 出现上面情况就说明webpack打包成功，就会在项目文件路径下出现：dist文件夹

温馨提示

webpack会自动寻找src目录，然后寻找index.js入口文件，然后进行打包，最终生成一个dist目录为打包后内容。

在public下创建index.html，引入自动生成的main.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增加配置文件

webpack 可以增加配置文件，有了配置文件之后，可以更多的操作他

入口配置

在项目的根目录下创建webpack.config.js文件并输入以下代码

module.exports = {// JavaScript 执行入口文件entry: './src/index.js',
};

出口配置

在 webpack.config.js 文件增加出口配置代码

const path = require("path");module.exports = {// 配置入口文件entry:"./src/index.js",// 配置出口文件output:{// 把所有依赖的模块合并输出到一个bundle.js文件filename:"bundle.js",// 把输入的文件都放到dist目录下// path.resolve:合并路径path:path.resolve(__dirname,"./dist"),}
}

然后我们再执行 webpack 命令，此时就会默认执行 webpack.config.js 他会按照配置文件进行运行

4.Webpack中使用Loader

Webpack 只能理解 JavaScript 和 JSON 文件，这是 webpack 开箱可用的自带能力。loader 能让 webpack 能够去处理其他类型的文件（比如css类型文件，图片类型等），并将它们转换为有效模块，以供使用

Webpack 把一切文件看作模块，CSS 文件也不例外，所以想打包CSS需要安装

css-loader 和 style-loader

增加CSS文件

在 index.js 文件中引入CSS文件

import "../src/css/index.css"

修改配置

修改 webpack.config.js 配置文件

const path = require("path");module.exports = {module:{rules:[// 解析css文件{test:/\.css$/,use:['style-loader','css-loader']}]}
}

温馨提示

style-loader和css-loader是存在先后顺序的，必须先写style-loader在写

css-loader

安装 css-loader

npm install --save-dev css-loader@6.7.1

安装 style-loader

npm install --save-dev style-loader@3.3.1

5.Webpack中使用Loader_处理Less文件

安装

温馨提示:

需要安装less和less-loader两个包

npm instal --save-dev less@4.1.3 less-loader@11.0.0

修改配置

修改 webpack.config.js 配置文件

const path = require('path');module.exports = {module: {rules: [// 解析less文件{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }]}
};

增加 less 文件引入到项目中

import "../src/css/style.less"

6.Webpack中使用Loader_处理Sass文件

我想 webpack 能打包scss\sass文件类型

安装

温馨提示

需要安装sass和sass-loader两个包

npm instal --save-dev sass@1.52.3 sass-loader@13.0.0

修改配置

修改 webpack.config.js 配置文件

module.exports = {module: {rules: [// 解析sass文件{ test: /\.(scss|sass)$/, use: ['style-loader', 'css-loader', 'sass-loader'] }]}
};

增加 scss 文件引入到项目中

import "../src/css/style.scss"

7.Webpack中使用插件_HTML插件

html-webpack-plugin 可以帮助我们将src的index.html复制一份到项目的根目录中

安装

npm install html-webpack-plugin@5.5.0 --save-dev

配置插件

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

温馨提示

        会自动帮打包好的bundle.js 自动放进index.html 的底部

8.Webpack分离CSS文件

当前的打包，是将JavaScript和CSS同时打包进入了一个文件中，如果CSS很小其实是有优势的，但是如果CSS很大，那么这个文件就应该单独抽离出来

我们可以使用 mini-css-extract-plugin 进行分离CSS

安装

npm install --save-dev mini-css-extract-plugin@2.6.1

修改配置文件

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"})]
}

温馨提示

mini-css-extract-plugin 与 style-loader 冲突，需要删除 style-loader

9.Webpack压缩CSS文件

通过 mini-css-extract-plugin 分离出来的CSS文件并没有经历压缩，所以我们需要单独进行压缩，如何操作呢？

安装

通过 optimize-css-assets-webpack-plugin 进行压缩CSS文件

npm/cnpm install --save-dev optimize-css-assets-webpack-plugin@6.0.1
// 我刚开始使用npm安装，报错了，但是使用cnpm就没事

修改配置文件

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.Webpack中配置Babel

走到此时很多小伙伴可能会发现问题，我们现在写的ES6代码，为啥能正常运行呢？

那是因为我们目前用的是 Chrome 浏览器，默认就支持，但是如果一些浏览器无法支持怎么办?

我需要使用 babel 进行编译

安装

npm install --save-dev @babel/core@7.18.5
npm install --save-dev @babel/preset-env@7.18.2
npm install --save-dev babel-loader@8.2.5

增加配置文件"babel.config.js"

在项目根目录下增加 babel.config.js 的配置文件

// babel.config.js
module.exports = {presets: ['@babel/preset-env']
}

修改配置文件

module: {rules: [// 使用babel将ES6语法转化成ES5语法{test:/\.js$/,use:['babel-loader']},]
}

11.Webpack中模式（Mode）

提供 mode 配置选项，告知 webpack 使用相应模式的内置优化。

'none'| 'development' | 'production'

选项	描述
development	会将 DefinePlugin 中 process.env.NODE_ENV 的值设置为 development. 为模块和 chunk 启用有效的名。
production	会将 DefinePlugin 中 process.env.NODE_ENV 的值设置为 production。为模块和 chunk 启用确定性的混淆名称，FlagDependencyUsagePlugin，FlagIncludedChunksPlugin，ModuleConcatenationPlugin，NoEmitOnErrorsPlugin 和 TerserPlugin 。
none	不使用任何默认优化选项

实现模式(Mode)有两种方式：

第一种：只需在配置对象中提供 mode 选项

module.exports = {mode: 'development',
};

第二种：从 CLI 参数中传递（就是在终端输入的命令中指定模式）

webpack --mode=development

12.Webpack中使用DevServer

到目前为止 webpack 基本上可以正常使用了，但在实际开发中你可能会需要：

1. 提供 HTTP 服务而不是使用本地文件预览；
2. 监听文件的变化并自动刷新网页，做到实时预览；
3. 支持 Source Map，以方便调试。

对于这些， Webpack 都为你考虑好了。Webpack 原生支持上述第2、3点内容，结合官方提供的开发工具 DevServer 也可以很方便地做到第1点。 DevServer 会启动一个 HTTP 服务器用于服务网页请求，同时会帮助启动 Webpack ，并接收 Webpack 发出的文件更变信号，通过 WebSocket 协议自动刷新网页做到实时预览

安装服务器依赖

npm install -g webpack-dev-server@4.9.2
npm install --save-dev webpack-dev-server@4.9.2
// 使用npm安装报错，改成cnpm就好了

修改配置文件

const path = require('path');module.exports = {devServer: {// 服务器打开目录static: path.join(__dirname, 'public'),// 开启压缩compress: true,// 设置端口port: 9000,// 热更新hot: true,// 自动打开浏览器open: true,//使用 History 路由模式时，若404错误时被替代为 index.htmlhistoryApiFallback: 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.htmlhistoryApiFallback:true}
}

服务器运行方式

1. webpack serve
2. webpack-dev-server

温馨提示

修改配置文件的情况下，是无法热更新的，需要重启服务器，热更新只对代码剩下 src

13.配置快捷运行方案

配置快捷运行方案可以方便我们统一运行方式，不然我们需要记忆更多关键词例如：webpack、webpack serve、webpack-dev-server等等

修改方案

在 package.json 中，scripts 中进行配置

"scripts": {"test": "echo \"Error: no test specified\" && exit 1","start":"webpack --mode=production","dev":"webpack-dev-server --mode=development"},

温馨提示

如果在 package.json 文件中，并没有找到 scripts ,可以通过执行 npm init 重新生成 package.json 文件

运行方式

npm start  // 相当于运行webpack
npm run dev // 相当于运行webpack serve

14.开发模式与生产模式分离

在开发的过程中，我们一般会将开发环境进行区分：

1. 开发环境
2. 测试环境
3. 生产环境
4. ...

开发模式

开发模式是为开发者更方便开发而存在的，在开发模式下，一般是为了更方便的调试，所以错误信息会提示很全面，并且存在热更新状态等

生产模式

生产模式是为了项目打包上线而存在的，在生产模式下，会去掉更多的错误提示，让想打包尽可能变小等

webpack 配置开发模式和生产模式

在 webpack 中，我们可以区分开发模式和生产模式，例如 mode 就有 development 和 production 的区别

安装依赖：

webpack-merge 可以用来合并多个配置文件：

npm install --save-dev webpack-merge@5.8.0
// npm安装报错，使用cnpm不报错

创建开发和生产模式文件

在项目根目录下创建 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.htmlhistoryApiFallback: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.jsconst 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.htmlhistoryApiFallback:true}
}module.exports = webpackConfig;

重新配置运行方式:(package.json文件中）

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

15.Webpack中devtool增强调试过程

我们可以通过 devtool 来设置增强调试过程

通过设置devtool:"source-map"

Source Map

1. source map 是一个信息文件，里面存储着代码压缩前后的位置信息。
2. 即可以在Debug时直接显示原始代码的位置信息，而不是压缩后的，极大方便后期调试

开发环境下默认生成的Source Map ，记录的是生成后的代码的位置。会导致运行时报错的行数与源代码的行数不一致的问题

解决方案：在webpack.dev.config.js中添加如下配置，即可保证运行时报错的行数与源代码的行数保持一致

// 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.htmlhistoryApiFallback: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)

Source Map 的最佳实践

1. 开发模式下

   建议直接把devtool 的值设置为source-map,可以直接定位到具体的错误行

2. 生产环境下

   建议关闭Source Map 或者 将devtool 设置为 hidden-nosources-source-map,防止源码泄漏，提高网站的安全性

16. .browserslistrc文件说明

browserslistrc文件是为了表示当前项目的浏览器兼容情况

使用方式有三种：

1. 在package.json中设置
2. 设置成独立的配置文件
3. 某些插件需要重新设置browserslist

我们参考Vue项目的环境配置，选择第二种方式，设置成独立的配置文件

在项目的根目录下创建 .browserslistrc 文件

> 1%  // 兼容市场上占有率超过1%的浏览器(世界级)
last 2 versions // 兼容浏览器最近的两个版本
not dead // 不支持24个月内没有官方支持或者更新的浏览器
not ie 11 // 不支持ie 11

17.postcss-loader处理css兼容

postcss是JavaScript转换样式的工具，这个工具能处理css兼容问题。就是这个工具能给我们写的css代码添加一些兼容的前缀

cnpm install --save-dev autoprefixer@10.4.7
cnpm install --save-dev postcss@8.4.14
cnpm isntall --save-dev postcss-loader@7.0.0
cnpm install --save-dev postcss-preset-env@7.7.1

在项目根目录下创建 postcss.config.js 文件

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

修改 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;
}

如下：

报错了

在项目运行的根目录下的终端中运行：cnpm install

然后在项目运行的根目录下重启开发环境：npm run dev就可以运行起来了

18.Webpack构建React环境

目前React和Vue两个最常用的前端框架都是使用Webpack进行构建项目

接下来，我们用 webpack 构架一个React项目的环境

安装

cnpm install -D @babel/preset-react@7.17.12
cnpm install -S react@18.2.0
cnpm install -S react-dom@18.2.0

增加配置文件

React使用的语法为jsx语法，所以我们需要配置jsx的解析模块

// 解析react文件
{test: /\.(js|jsx)$/,exclude: /node_modules/,loader: 'babel-loader'
}

 同时我们需要修改babel.config.js文件

module.exports = {presets: ['@babel/preset-env',"@babel/preset-react"]
}

编写React代码

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"))

最后运行开发环境(npm run dev)：react项目的环境就配置好了

19.Webpack构建Vue环境

目前React和Vue两个最常用的前端框架都是使用Webpack进行构建项目

接下来，我们用 webpack 构架一个Vue项目的环境

安装

Vue专属文件时.vue,我们需要一些包帮助去解析他

cnpm install --save vue@3.2.37 
cnpm install --save-dev vue-loader@17.0.0 
cnpm install --save-dev vue-style-loader@4.1.3
cnpm install --save-dev vue-template-loader@1.1.0 
cnpm install --save-dev vue-template-compiler@2.6.14

增加配置文件

在 webpack.config.js 文件中

const { VueLoaderPlugin } = require('vue-loader')const baseConf = {module:{{test: /\.vue$/,use: ['vue-loader']}},plugins:[new VueLoaderPlugin()]
}

编写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.Webpack图片处理

在Webpack中，一切皆模块，图片也不例外，也需要我们单独处理一下

安装

图片处理是通过 url-loader  file-loader

cnpm install --save-dev url-loader@4.1.1cnpm install --save-dev file-loader@6.2.0

增加配置(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]"}}
}

然后再给src目录下的文件中添加图片

此时，可以添加效果20 * 1024 kb的图片，并进行测试

温馨提示

如果图片大于20 * 1024kb，则需要安装 file-loader

npm install --save-dev file-loader@6.2.0

不在需要做任何额外操作，即可引入大于20 * 1024kb，则是直接拷贝到 dist/img/ 目录下

特别提示

这里字体图标也是可以识别的，这也是Webpack5版本带来的优势，一次性全处理了

21.Webpack中Proxy代理 （其实就是跨域的问题）

在做网络请求的时候，前端最常见的问题就是跨域，分别可以在前端和后端处理

1. 前端

   • JSONP(需要服务器端支持)
   • proxy代理(开发模式)

2. 后端

   • cors

安装网络请求方案

cnpm install --save-dev axios@0.27.2

增加配置

在 webpack.dev.config.js 增加配置

devServer:{proxy: {//定义一个标记，如以后api开头的请求都走代理的设置'/api': {// 要请求的真实服务端基地址 相当于被/api替代了target: 'http://iwenwiki.com',//把api重写为空，因为别人没有 /apipathRewrite: { "^/api": "" },//发送请求头中host会设置成targetchangeOrigin: 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>

这样就可以获取到信息，也解决了跨域的问题

22.自动清理dist

为了每次打包发布时自动清理dist目录下的文件（避免旧的文件会保留）

可以安装 clean-webpack-plugin 插件

安装

cnpm install --save-dev clean-webpack-plugin@3.0.0

插件的配置

// 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.Webpack优化

Webpack的优化在之前的对Webpack的操作已经有很多，例如：分离开发和生产环境、分离和压缩CSS代码，增加 devtool 优化开发和生产环境的调试等等

接下来再介绍一些优化方案：

1. 规定文件处理区域
2. 查看文件大小，过大的着手处理

规定文件处理区域

项目中js文件是很多的，尤其是在node_modules文件夹中，但是我们需要处理的就有src目录下的

所以我们需要指定区域

 {test: /\.js$/,use: ['babel-loader'],// 包含只处理 src 目录下的文件include: path.resolve(__dirname, 'src'),}

查看文件大小，过大的着手处理

webpack-bundle-analyzer 是一个打包分析神器，它的界面也清晰，而且能很直观的给出每一个打包出来的文件的大小以及各自的依赖，能够更加方便的帮助我们对项目进行分析

安装：

cnpm install --save-dev webpack-bundle-analyzer

增加配置：

// webpack.dev.config.js  开发环境const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');module.exports = {plugins: [new BundleAnalyzerPlugin({analyzerPort: 8888, // 指定端口号openAnalyzer: false,})]
}

24.JavaScript中的代码检查

一个前端团队很重要的就是代码规范，有了代码规范才可以保证代码质量

常见的前端代码规范工具：

1. JSLint
2. JSHint
3. ESLint

当然这里我们首推 ESLint ,后续的Webpack中我们也是集成 ESLint

JSLint

优点：配置是老道已经定好的，开箱即用

缺点：

1. 有限的配置选项，很多规则不能禁用
2. 规范严格，凡是不符合老道所认为的好的风格的，都会有警告
3. 扩展性差
4. 无法根据错误定位到对应的规则

JSHint

优点：

1. 有了很多参数可以配置
2. 支持配置文件，方便使用
3. 支持了一些常用类库
4. 支持了基本的ES6

缺点：

1. 不支持自定义规则
2. 无法根据错误定位到对应的规则

ESLint

优点：

1. 默认规则里面包含了JSLint和JSHint的规则，易于迁移
2. 可配置为警告和错误两个等级，或者直接禁用掉
3. 支持插件扩展
4. 可以自定义规则
5. 可以根据错误定位到对应的规则
6. 支持ES6
7. 唯一一个支持JSX的工具

缺点：

1. 需要进行一些自定义配置(因为太灵活了嘛，不过文档是很详细的)
2. 慢 (它比其他两个都要慢)

25.Webpack中配置ESLint

为了统一规范团队代码习惯，降低代码出错风险，eslint已经成为前端项目必备法器

简单来说，写代码必须遵循一定的规范，至于是什么规范，我们可以自己定义

ESLint官网

Find and fix problems in your JavaScript code - ESLint - Pluggable JavaScript LinterA pluggable and configurable linter tool for identifying and reporting on patterns in JavaScript. Maintain your code quality with ease.https://eslint.org/

安装依赖

cnpm install eslint@8.18.0 eslint-webpack-plugin@3.1.1 --save-dev

webpack配置文件（ webpack.dev.config.js）

// webpack.dev.config.js 文件中
const ESLintPlugin = require('eslint-webpack-plugin');module.exports = {plugins: [new ESLintPlugin()],
};

根目录下新增.eslintrc.js文件

module.exports = {env: {node: true,browser: true,es6: true,},// 支持ES6并不代表支持所有ES6新语法， 设置为 "module" 支持 ECMAScript 模块parserOptions: {sourceType: 'module'},rules: {// JS文件中不支持console.log()'no-console': 2},
};

常见ESLint规范

“no-alert”: 0,//禁止使用alert confirm prompt 

“no-array-constructor”: 2,//禁止使用数组构造器 

“no-bitwise”: 0,//禁止使用按位运算符 

“no-caller”: 1,//禁止使用arguments.caller或arguments.callee 

“no-catch-shadow”: 2,//禁止catch子句参数与外部作用域变量同名 

“no-class-assign”: 2,//禁止给类赋值 

“no-cond-assign”: 2,//禁止在条件表达式中使用赋值语句 

“no-console”: 2,//禁止使用console 

“no-const-assign”: 2,//禁止修改const声明的变量 

“no-constant-condition”: 2,//禁止在条件中使用常量表达式 if(true) if(1)

 “no-continue”: 0,//禁止使用continue

 “no-control-regex”: 2,//禁止在正则表达式中使用控制字符 

“no-debugger”: 2,//禁止使用debugger

 “no-delete-var”: 2,//不能对var声明的变量使用delete操作符 

“no-div-regex”: 1,//不能使用看起来像除法的正则表达式/=foo/ 

“no-dupe-keys”: 2,//在创建对象字面量时不允许键重复 {a:1,a:1} 

“no-dupe-args”: 2,//函数参数不能重复 

“no-duplicate-case”: 2,//switch中的case标签不能重复 

“no-else-return”: 2,//如果if语句里面有return,后面不能跟else语句 

“no-empty”: 2,//块语句中的内容不能为空 

“no-empty-character-class”: 2,//正则表达式中的[]内容不能为空 

“no-empty-label”: 2,//禁止使用空label 

“no-eq-null”: 2,//禁止对null使用==或!=运算符

 “no-eval”: 1,//禁止使用eval 

“no-ex-assign”: 2,//禁止给catch语句中的异常参数赋值 

“no-extend-native”: 2,//禁止扩展native对象 

“no-extra-bind”: 2,//禁止不必要的函数绑定 

“no-extra-boolean-cast”: 2,//禁止不必要的bool转换 

“no-extra-parens”: 2,//禁止非必要的括号 

“no-extra-semi”: 2,//禁止多余的冒号 

“no-fallthrough”: 1,//禁止switch穿透 

“no-floating-decimal”: 2,//禁止省略浮点数中的0 .5 3. 

“no-func-assign”: 2,//禁止重复的函数声明 

“no-implicit-coercion”: 1,//禁止隐式转换 

“no-implied-eval”: 2,//禁止使用隐式eval 

“no-inline-comments”: 0,//禁止行内备注 

“no-inner-declarations”: [2, “functions”],//禁止在块语句中使用声明（变量或函数） 

“no-invalid-regexp”: 2,//禁止无效的正则表达式 

“no-invalid-this”: 2,//禁止无效的this，只能用在构造器，类，对象字面量 

“no-irregular-whitespace”: 2,//不能有不规则的空格 

“no-iterator”: 2,//禁止使用iterator 属性 

“no-label-var”: 2,//label名不能与var声明的变量名相同 

“no-labels”: 2,//禁止标签声明 

“no-lone-blocks”: 2,//禁止不必要的嵌套块 

“no-lonely-if”: 2,//禁止else语句内只有if语句 

“no-loop-func”: 1,//禁止在循环中使用函数（如果没有引用外部变量不形成闭包就可以） 

“no-mixed-requires”: [0, false],//声明时不能混用声明类型 

“no-mixed-spaces-and-tabs”: [2, false],//禁止混用tab和空格 

“linebreak-style”: [0, “windows”],//换行风格 

“no-multi-spaces”: 1,//不能用多余的空格

 “no-multi-str”: 2,//字符串不能用\换行 

“no-multiple-empty-lines”: [1, {“max”: 2}],//空行最多不能超过2行 

“no-native-reassign”: 2,//不能重写native对象 

“no-negated-in-lhs”: 2,//in 操作符的左边不能有! 

“no-nested-ternary”: 0,//禁止使用嵌套的三目运算 

“no-new”: 1,//禁止在使用new构造一个实例后不赋值

 “no-new-func”: 1,//禁止使用new Function 

“no-new-object”: 2,//禁止使用new Object() 

“no-new-require”: 2,//禁止使用new require 

“no-new-wrappers”: 2,//禁止使用new创建包装实例，new String new Boolean new Number 

“no-obj-calls”: 2,//不能调用内置的全局对象，比如Math() JSON() 

“no-octal”: 2,//禁止使用八进制数字 

“no-octal-escape”: 2,//禁止使用八进制转义序列 

“no-param-reassign”: 2,//禁止给参数重新赋值 

“no-path-concat”: 0,//node中不能使用dirname或filename做路径拼接 

“no-plusplus”: 0,//禁止使用++，– 

“no-process-env”: 0,//禁止使用process.env 

“no-process-exit”: 0,//禁止使用process.exit() 

“no-proto”: 2,//禁止使用proto属性 

“no-redeclare”: 2,//禁止重复声明变量 

“no-regex-spaces”: 2,//禁止在正则表达式字面量中使用多个空格 /foo bar/ 

“no-restricted-modules”: 0,//如果禁用了指定模块，使用就会报错 

“no-return-assign”: 1,//return 语句中不能有赋值表达式 

“no-script-url”: 0,//禁止使用javascript:void(0) 

“no-self-compare”: 2,//不能比较自身 

“no-sequences”: 0,//禁止使用逗号运算符 

“no-shadow”: 2,//外部作用域中的变量不能与它所包含的作用域中的变量或参数同名 

“no-shadow-restricted-names”: 2,//严格模式中规定的限制标识符不能作为声明时的变量名使用 

“no-spaced-func”: 2,//函数调用时 函数名与()之间不能有空格 

“no-sparse-arrays”: 2,//禁止稀疏数组， [1,2] 

“no-sync”: 0,//nodejs 禁止同步方法 

“no-ternary”: 0,//禁止使用三目运算符 

“no-trailing-spaces”: 1,//一行结束后面不要有空格 

“no-this-before-super”: 0,//在调用super()之前不能使用this或super 

“no-throw-literal”: 2,//禁止抛出字面量错误 throw

“error”; “no-undef”: 1,//不能有未定义的变量 

“no-undef-init”: 2,//变量初始化时不能直接给它赋值为undefined 

“no-undefined”: 2,//不能使用undefined 

“no-unexpected-multiline”: 2,//避免多行表达式 

“no-underscore-dangle”: 1,//标识符不能以_开头或结尾 

“no-unneeded-ternary”: 2,//禁止不必要的嵌套 var isYes = answer === 1 ? true : false; 

“no-unreachable”: 2,//不能有无法执行的代码 

“no-unused-expressions”: 2,//禁止无用的表达式 

“no-unused-vars”: [2, {“vars”: “all”, “args”: “after-used”}],//不能有声明后未被使用的变量或参数

 “no-use-before-define”: 2,//未定义前不能使用 

“no-useless-call”: 2,//禁止不必要的call和apply 

“no-void”: 2,//禁用void操作符 

“no-var”: 0,//禁用var，用let和const代替 

“no-warning-comments”: [1, { “terms”: [“todo”, “fixme”, “xxx”], “location”: “start” }],//不能有警告备注 

“no-with”: 2,//禁用with 

“array-bracket-spacing”: [2, “never”],//是否允许非空数组里面有多余的空格 

“arrow-parens”: 0,//箭头函数用小括号括起来 

“arrow-spacing”: 0,//=>的前/后括号 

“accessor-pairs”: 0,//在对象中使用getter/setter 

“block-scoped-var”: 0,//块语句中使用var 

“brace-style”: [1, “1tbs”],//大括号风格 

“callback-return”: 1,//避免多次调用回调什么的 

“camelcase”: 2,//强制驼峰法命名 

“comma-dangle”: [2, “never”],//对象字面量项尾不能有逗号 

“comma-spacing”: 0,//逗号前后的空格 

“comma-style”: [2, “last”],//逗号风格，换行时在行首还是行尾 

“complexity”: [0, 11],//循环复杂度 

“computed-property-spacing”: [0, “never”],//是否允许计算后的键名什么的 

“consistent-return”: 0,//return 后面是否允许省略 

“consistent-this”: [2, “that”],//this别名 

“constructor-super”: 0,//非派生类不能调用super，派生类必须调用super 

“curly”: [2, “all”],//必须使用 if(){} 中的{} 

“default-case”: 2,//switch语句最后必须有default 

“dot-location”: 0,//对象访问符的位置，换行的时候在行首还是行尾 

“dot-notation”: [0, { “allowKeywords”: true }],//避免不必要的方括号 

“eol-last”: 0,//文件以单一的换行符结束 

“eqeqeq”: 2,//必须使用全等 “func-names”: 0,//函数表达式必须有名字 

“func-style”: [0, “declaration”],//函数风格，规定只能使用函数声明/函数表达式 

“generator-star-spacing”: 0,//生成器函数*的前后空格 

“guard-for-in”: 0,//for in循环要用if语句过滤 

“handle-callback-err”: 0,//nodejs 处理错误 

“id-length”: 0,//变量名长度 

“indent”: [2, 4],//缩进风格 

“init-declarations”: 0,//声明时必须赋初值 

“key-spacing”: [0, { “beforeColon”: false, “afterColon”: true }],//对象字面量中冒号的前后空格 

“lines-around-comment”: 0,//行前/行后备注 

“max-depth”: [0, 4],//嵌套块深度 

“max-len”: [0, 80, 4],//字符串最大长度 

“max-nested-callbacks”: [0, 2],//回调嵌套深度 

“max-params”: [0, 3],//函数最多只能有3个参数 

“max-statements”: [0, 10],//函数内最多有几个声明 

“new-cap”: 2,//函数名首行大写必须使用new方式调用，首行小写必须用不带new方式调用 

“new-parens”: 2,//new时必须加小括号 

“newline-after-var”: 2,//变量声明后是否需要空一行 

“object-curly-spacing”: [0, “never”],//大括号内是否允许不必要的空格 

“object-shorthand”: 0,//强制对象字面量缩写语法 

“one-var”: 1,//连续声明 

“operator-assignment”: [0, “always”],//赋值运算符 += -=什么的 

“operator-linebreak”: [2, “after”],//换行时运算符在行尾还是行首 

“padded-blocks”: 0,//块语句内行首行尾是否要空行 

“prefer-const”: 0,//首选const 

“prefer-spread”: 0,//首选展开运算

 “prefer-reflect”: 0,//首选Reflect的方法 

“quotes”: [1, “single”],//引号类型 `` “” ‘’ 

“quote-props”:[2, “always”],//对象字面量中的属性名是否强制双引号 

“radix”: 2,//parseInt必须指定第二个参数 “id-match”: 0,//命名检测 

“require-yield”: 0,//生成器函数必须有yield “semi”: [2, “always”],//语句强制分号结尾 

“semi-spacing”: [0, {“before”: false, “after”: true}],//分号前后空格 

“sort-vars”: 0,//变量声明时排序 

“space-after-keywords”: [0, “always”],//关键字后面是否要空一格 

“space-before-blocks”: [0, “always”],//不以新行开始的块{前面要不要有空格

“space-before-function-paren”: [0, “always”],//函数定义时括号前面要不要有空格 

“space-in-parens”: [0, “never”],//小括号里面要不要有空格 

“space-infix-ops”: 0,//中缀操作符周围要不要有空格 

“space-return-throw-case”: 2,//return throw case后面要不要加空格 

“space-unary-ops”: [0, { “words”: true, “nonwords”: false }],//一元运算符的前/后要不要加空格 

“spaced-comment”: 0,//注释风格要不要有空格什么的 

“strict”: 2,//使用严格模式 

“use-isnan”: 2,//禁止比较时使用NaN，只能用isNaN() 

“valid-jsdoc”: 0,//jsdoc规则 

“valid-typeof”: 2,//必须使用合法的typeof的值 

“vars-on-top”: 2,//var必须放在作用域顶部 

“wrap-iife”: [2, “inside”],//立即执行函数表达式的小括号风格 

“wrap-regex”: 0,//正则表达式字面量用小括号包起来 

“yoda”: [2, “never”]//禁止表达条件

个人难以制定大而全的规范，此时我们可以借用大公司已成熟方案，再根据项目情况稍加修改，这里我们引用Airbnb

安装Airbnb规则依赖

cnpm install eslint-config-airbnb-base@15.0.0  eslint-plugin-import@2.26.0 --save-dev

eslint配置文件中使用Airbnb

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},
};

此时编写不规范的代码，会发现新增加了诸多规则，这就需要我们一一改正了