初级前端面试题总结（html, css, js, ajax，http）

答案仅供参考。答案有不全或有偏颇之处，欢迎各位在评论区补充及指正。

什么是盒子模型？

把所有的网页元素都看成一个盒子，它具有：
content，padding，border，margin
四个属性，这就是盒子模型。

行内元素有哪些？块级元素有哪些？空（viod）元素有哪些？

行内元素：a、b、span、img、input、strong、select、label、em、button、textarea

块级元素：div、ul、li、dl、dt、dd、p、h1-h6、blockquote

空元素：即系没有内容的HTML元素，例如：br、hr、link、input、img、meta

列举一些你所知道的HTML5和CSS3新特性

HTML5:
语义化更好的内容标签(header, nav, aside, article, section，footer )

用于媒介回放的 video 和 audio 元素

自定义属性data-id

HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。
calendar、date、time、email、url、search

CSS3:
颜色: 新增RGBA , HSLA模式

文字阴影(text-shadow)

边框: 圆角(border-radius) 边框阴影 : box-shadow

盒子模型: box-sizing

背景:background-size background-origin background-clip

渐变: linear-gradient , radial-gradient

过渡 : transition 可实现动画

自定义动画 animate @keyfrom

媒体查询 多栏布局 @media screen and (width:800px) {…}

border-image

2D转换;transform: translate(x,y) rotate(x,y) skew(x,y) scale(x,y)

3D转换

字体图标 font-face

弹性布局flex

简述一下src和href的区别

href用于建立当前页面与引用资源之间的关系（链接），而src则会替换当前标签。遇到href，页面会并行加载后续内容；而src则不同，浏览器需要加载完毕src的内容才会继续往下走

建议js文件放在HTML文档的最后面。如果js文件放在了head标签中，可以使用window.onload实现js的最后加载。

详细可参考：href与src的区别

CSS实现垂直水平居中（列举一种）

方法1： 使用position:absolute与transform配合实现

如果不确定子元素高度，可以不使用margin-top，使用transform:translate(-50%,-50%)

方法2.：弹性布局（flex）
设置父元素的display的值为flex，然后设置align-items: center; justify-content: center;

可参考：css实现垂直水平居中的几种方法

px和em，rem的区别

1. PX实际上就是像素，用PX设置字体大小时，比较稳定和精确。但如果改变浏览器的缩放，原本的布局就会被打破
2. em和rem相对于px更具有灵活性，他们是相对长度单位，意思是长度不是定死了的，更适用于响应式布局
3. 对于em和rem的区别一句话概括：em相对于父元素，rem相对于根元素
4. IE6-IE8，不支持em和rem属性，px是所有浏览器都支持。
   因此为了浏览器的兼容性，可“px”和“rem”一起使用，用"px"来实现IE6-8下的效果，然后使用“Rem”来实现代浏览器的效果

实际例子可参考：https://www.cnblogs.com/nannan1221/p/10772977.html

说一下同步和异步的区别

同步会阻塞，异步不会阻塞

同步：程序运行从上而下，浏览器必须把这个任务执行完毕，才能继续执行下一个任务

异步：程序运行从上而下，浏览器任务没有执行完，但是可以继续执行下一行代码，当被调用者得到结果之后会通过回调函数主动通知调用者。

Doctype作用？严格模式与混杂模式如何区别？他们有何意义？

作用：
<!DOCTYPE>声明位于位于HTML文档中的第一行，处于 标签之前。告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。

严格模式与混杂模式如何区别？
1.标准模式(严格模式)的排版和JS运作模式都是以该浏览器支持的最高标准运行（W3C 标准）。
2.在兼容模式（混杂模式或怪异模式）中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。（这里的向后兼容是指站在新版本的立场上讨论过去版本的兼容性问题）

意义：
随着标准一致性越来越重要，浏览器开发商不得不面临一个艰难的抉择：逐渐遵循w3c的标准是前进的方向。但是改变现有的css，完全去遵循标准，会使许多旧网站或多或少的收到破坏，如果浏览器突然以正确的方式解析现存的css，陈旧的网站的显示必然会受到影响。所以，所有的浏览器都需要提供两种模式，混杂模式服务于旧世规则，严格模式服务于标准规则。

null和undefined的区别

null 和 undefined 的值相等，当两者做全等比较时类型不等

console.log(null==undefined);    //true  因为两者都默认转换成了false
console.log(null===undefined);    //false   "==="表示绝对相等，null和undefined类型是不一样的，所以输出“false”
console.log(typeof undefined);    //"undefined"  
console.log(typeof null);       //"object"  

null： Null类型，代表“空值”，代表一个空对象指针，使用typeof运算得到 “object”，所以你可以认为它是一个特殊的对象值。
一般用于主动释放指向对象的引用，例如：

var emps = ['ss','nn'];
emps = null;     // 释放指向数组的引用

undefined： 表示变量声明过但并未赋过值。

var a;    // a 自动被赋值为 undefined

那到底什么时候是null,什么时候是undefined呢？？？

null表示"没有对象"，即该处不应该有值。典型用法是：

（1） 作为函数的参数，表示该函数的参数不是对象。
（2） 作为对象原型链的终点。

undefined表示缺少值，即此处应该有值，但没有定义。典型用法是：

（1）定义了形参，没有传实参，显示undefined

（2）对象属性名不存在时，显示undefined

（3）函数没有写返回值，即没有写return，拿到的是undefined

（4）写了return，但没有赋值，拿到的是undefined

何时使用null?
当使用完一个比较大的对象时，需要对其进行释放内存时，设置为 null。

简述你对json的了解

(1) JSON 是一种轻量级的数据交换格式；采用键值对的方式，易于阅读和编写，同时也易于机器解析和生成。
(2) JSON 是独立于语言的，也就是说不管是什么语言，都可解析为json，只需按照json规则来就行。
(3) JSON的语法表示三种类型值，简单值(字符串，数值，布尔值，null),数组，对象

简单介绍构造函数

一个例子来解释构造函数 ，我觉得蛮贴切的就在这里引用一下，有人想要造一千个金币，并且要每个金币上面刻有不同的编号，最简单的方法就是，造一个金币的模子，然后再各自刻各自的编号， 构造函数就是这个金币的模子，你每次new一下，就是造一个金币。
构造函数就是一个普通的函数，创建方式和普通函数没有区别，不同的是构造函数习惯上首字母大写。另外就是调用方式的不同，普通函数是直接调用，而构造函数需要使用new关键字来调用。

具体可参考：构造函数和普通函数的区别

javascript中的原型和原型链

原型：
在JavaScript中，每当定义一个函数数据类型(普通函数、类)时候，都会天生自带一个prototype属性，这个属性指向函数的原型对象，并且这个属性是一个对象数据类型的值。

原型对象就相当于一个公共的区域，所有同一个类的实例都可以访问到这个原型对象，我们可以将对象中共有的内容，统一设置到原型对象中。

原型链：
每个对象创建都会有一个prototype的原型属性，当这个对象的某个属性不存在时就会去他的prototype上查找，而prototype又有自己的prototype,然后如此循环，就是原型链
个人理解：只有函数才有prototype属性，可能这个说法不大准确，但大多数用的时候就这意思，
1、proto 是原型链查询中实际用到的，它总是指向 prototype；
2、prototype 是函数所独有的，在定义构造函数时自动创建，它总是被 proto 所指。

可参考：原型和原型链详解

作用域和闭包

作用域：在 JavaScript 中, 作用域为可访问变量，对象，函数的集合。

函数A 里面包含了 函数B，而 函数B 里面使用了 函数A 的变量，那么 函数B 被称为闭包。
又或者：闭包就是能够读取其他函数内部变量的函数

function A() {
var a = 1;
function B() {
console.log(a);
}
return B();
}

闭包举个栗子：

上面三行代码在一个立即执行函数中。
三行代码中，有一个局部变量 local，有一个函数 foo，foo 里面可以访问到 local 变量。
好了这就是一个闭包：
「函数」和「函数内部能访问到的变量」（也叫环境）的总和，就是一个闭包。
就这么简单。

详细案例可参考：JavaScript 作用域
JavaScript 闭包
JS 中的闭包是什么？讲的超级好的
什么是闭包？以及闭包的优点，缺点，用处，及特性

它的最大用处有两个，一个是前面提到的可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中。

为什么不能滥用闭包

由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。
另外说一个概念：内存泄露是指你用不到（访问不到）的变量，依然占居着内存空间，不能被再次利用起来。

什么是ajax？

Ajax是全称是Asynchronous JavaScript and XML，即异步JavaScript和xml，用于在Web页面中实现异步数据交互，实现页面局部刷新

ajax优缺点？

优点：

1. 提升用户体验：可以在不刷新整个页面的情况下更新部分内容（局部内容更新），可以更快、更流畅的浏览网页
2. 减少服务器负载：由于ajax只更新部分内容，因此可以减少服务器的负载和带宽消耗，提高网站性能和可扩展性
3. 支持异步通信：支持异步通信，可以在后台向服务器发送请求，不打断用户的操作
4. 界面和应用相分离（ajax将界面和应用分离也就是数据与呈现相分离）

缺点：

1. 对搜索引擎不友好：由于ajax动态更新页面内容，搜索引擎可能无法索引所有内容，影响网站SEO效果。
2. 安全问题： 由于ajax可以向服务器发送异步请求，可能会导致跨站点脚本攻击（XXS）和跨站点请求伪造（CSRF）等安全性问题。
3. 对浏览器兼容性要求高：不同浏览器对ajax的支持程度不同，需要编写兼容多种浏览器的代码。
4. 可维护性差：由于ajax将数据和处理逻辑分散在多个文件中，代码结构复杂，可维护性较差。
5. 难以调试：由于ajax是异步通信，调试时可能需要使用特殊工具和技术，难度较大。

ajax原理？？（页面渲染的过程？？创建ajax过程？？）

1）创建一个XMLHttpRequest对象，用于向服务器发送请求和接收响应。
2）设置XHR对象的callback函数，该函数会在服务器响应返回后被调用。
3）使用XHR对象发送请求，并传递必要的参数（如请求的URL、请求类型、请求头、请求体等）
4）callback函数中处理服务器响应，通常是解析响应数据并更新网页内容。

以下是一个使用jQuery的Ajax示例代码：

$.ajax({
  url: "example.com/data",
  type: "GET",
  dataType: "json",
  success: function(data) {
    // 处理响应数据
  },
  error: function(jqXHR, textStatus, errorThrown) {
    // 处理请求错误
  }
});
// 该代码会向"example.com/data"发送一个GET请求，请求数据类型为JSON。
// 当服务器响应成功返回时，success函数会被调用，可以在该函数中处理响应数据。
// 如果请求出现错误，error函数会被调用，可以在该函数中处理错误情况。

总结一句话就是：
创建一个XHR对象，并发送异步请求，接着监听服务器响应结果，并把它渲染在页面上

get、post的区别？

此题比较简单，但一定要回答的全面

1. get 请求会把请求参数放在URL的末尾，通过？连接，通过&进行参数分割；而post 请求会把请求参数放在请求体中。因此，get请求的参数可以直接在URL 中看到，而post请求的参数则不会在URL中显示。
2. get 请求有长度限制，通常为2048个字符。post 请求没有长度限制。
3. get请求是幂等的，也就是说，多次请求同一个URL，服务器的响应结果始终相同。post 请求不是幂等的，多次请求同一个 URL，服务器的响应结果可能会不同。
4. get 请求只能进行简单的数据查询，而post请求可以进行增、删、改、查等复杂操作。

因此，当需要提交一些敏感信息时，应使用post请求，以保护用户隐私。而当需要获取一些简单的数据时，可以使用get请求，以提高请求效率。

get请求传参长度的误区

 误区：我们经常说get请求参数的大小存在限制，而post请求的参数大小是无限制的

实际上HTTP 协议从未规定 GET/POST 的请求长度限制是多少。对get请求参数的限制是来源与浏览器或web服务器，浏览器或web服务器限制了url的长度。为了明确这个概念，我们必须再次强调下面几点:

1、HTTP 协议 未规定 GET 和POST的长度限制
2、GET的最大长度显示是因为 浏览器和 web服务器限制了 URI的长度
3、不同的浏览器和WEB服务器，限制的最大长度不一样
4、要支持IE，则最大长度为2083byte，若只支持Chrome，则最大长度 8182byte

补充get和post请求在缓存方面的区别

• get请求类似于查找的过程，用户获取数据，可以不用每次都与数据库连接，所以可以使用缓存。
• post不同，post做的一般是修改和删除的工作，所以必须与数据库交互，所以不能使用缓存。因此get请求适合于请求缓存。

get请求缓存方面延伸，看看就好：

对于 GET 请求，浏览器会根据 HTTP 响应头部字段中的缓存控制指令（例如 Cache-Control、Expires、ETag、Last-Modified 等）来判断服务器资源是否可以被缓存以及如何进行缓存。
如果服务器返回的响应头指示该资源可以缓存，那么浏览器会将该资源复制到本地缓存中（内存或磁盘），下次访问同一个 URL 的时候就可以直接从缓存中读取数据，而不用再去请求服务器。
如果服务器返回的响应头指示该资源不能缓存或已经过期，则浏览器必须向服务器发出请求获取最新内容。
需要注意的是，GET 请求并不一定会被缓存。实际上，如果 URL 包含查询参数或者一些特殊的请求头（例如 Cookie、Authorization 等），则缓存机制可能不适用。此外，某些情况下，用户可能希望主动清除本地缓存，或者通过强制刷新控制台清除缓存来获取最新的资源。
也并不是所有的 POST 请求都没有 Cache-Control 头部字

ajax请求时，如何解析json数据

使用JSON.parse

var jsonDate = '{ "name":"hello","age":23 }';
var jsonObj = JSON.parse( jsonDate ); 

如何中断ajax请求？

一种是设置超时时间让ajax自动断开，另一种是手动停止ajax请求，其核心是调用XML对象的abort方法，ajax.abort()

什么是跨域？

跨域问题来源于JavaScript的同源策略，即只有 协议+主机名+端口号 (如存在)相同，则允许相互访问，否则不能相互的去访问资源。
跨域问题是针对JS和ajax的。

如何解决跨域问题？（三种解决方案）

1. CORS 跨源资源共享

CORS 全称为 Cross Origin Resource Sharing（跨域资源共享）。这种方案对于前端来说没有什么工作量，和正常发送请求写法上没有任何区别，工作量基本都在后端这里。每一次请求，浏览器必须先以 OPTIONS 请求方式发送一个预请求（也不是所有请求都会发送 options），通过预检请求从而获知服务器端对跨源请求支持的 HTTP 方法。在确认服务器允许该跨源请求的情况下，再以实际的 HTTP 请求方法发送那个真正的请求。
推荐的原因是：只要第一次配好了，之后不管有多少接口和项目复用就可以了，一劳永逸的解决了跨域问题，而且不管是开发环境还是正式环境都能方便的使用。

//需要后端配置
response.addHeader(‘Access-Control-Allow-Origin:*’);//允许所有来源访问 
response.addHeader(‘Access-Control-Allow-Method:POST,GET’);//允许访问的方式

但总有后端觉得麻烦不想这么搞，那纯前端也是有解决方案的。

2. proxy 代理服务器

在 dev 开发模式下可以下使用 webpack 的 proxy 使用也是很方便，参照 文档 就会使用了。但这种方法在生产环境是不能使用的。在生产环境中需要使用 nginx 进行反向代理。不管是 proxy 和 nginx 的原理都是一样的，通过搭建一个中转服务器来转发请求规避跨域的问题。

代理服务器监听本地请求，然后由代理服务器转发请求到目标服务器，因为服务端不存在同源策略，所以不存在跨域问题。

3. 使用JSONP（json+padding）把数据内填充起来

3.1 什么是jsonp：

JSONP（JSON with Padding）是一种在前端领域经常使用的跨域请求数据的技术。由于同源策略的限制，浏览器通常不能跨域请求数据，而JSONP是利用 <script> 标签可以跨域加载资源的特性，实现跨域请求数据的。
JSONP请求的URL地址一般是类似callback=函数名这样的形式，后端返回的数据需要写入回调函数中。因此，在前端定义好回调函数后，后台会将数据以JSON的形式放入该函数中，从而实现数据的请求和处理。

3.2 jsonp和ajax的实质：

ajax的核心是通过xmlHttpRequest获取非本页内容

jsonp的核心是动态创建 <script> 标签实现的，因此无法直接获取HTTP响应状态码和请求头信息。

3.3 jsonp使用注意：

只能传递 通过 GET 方式传递的数据（参数通过url的方式传递,所以jsonp的 type类型只能是get ！）

3.4 jsonp使用代码：

Vue项目中发送JSONP请求：（使用vue-jsonp发送请求）

import { jsonp } from 'vue-jsonp'
function getAddressInfo({ lat, lng }) {
  jsonp('https://apis.map.qq.com/ws/geocoder/v1/?', {
    location: lat + ',' + lng,
    key: '',
    output: 'jsonp'
  }).then(res => {
    console.log(res)
  }).catch((err) =>{
    console.log() )
  })
}

js版：

 <script>
    var script = document.createElement('script');
    script.type = 'text/javascript';

    // 传参一个回调函数名给后端，方便后端返回时执行这个在前端定义的回调函数
    script.src = 'http://www.domain2.com:8080/login?user=admin&callback=handleCallback';
    document.head.appendChild(script);

    // 回调执行函数
    function handleCallback(res) {
        alert(JSON.stringify(res));
    }
 </script>

服务端返回如下（返回时即执行全局函数）：

handleCallback({"success": true, "user": "admin"})

jQuery版：

$.ajax({
			type : "GET",
			async : false,
			url : "http://a.a.com/a/FromServlet?userName=644064",
			dataType : "jsonp",//数据类型为jsonp  
			jsonp : "jsonpCallback",//服务端用于接收callback调用的function名的参数
			success : function(data) {
				alert(data["userName"]);
			},
			error : function() {
				alert('fail');
			}
		});

可参考：解决ajax跨域问题【5种解决方案】
9种常见的前端跨域解决方案（详解）

解释jsonp的原理

jsonp的原理就是利用<script>标签可以跨域加载资源的特性，实现跨域请求数据的。通过<script>标签src属性，发送带有callback参数的GET请求，服务端将接口返回数据拼凑到callback函数中，返回给浏览器，浏览器解析执行，从而前端拿到callback函数返回的数据。

什么是JSON？

JSON（JavaScript Object Notation）是一种轻量级数据交换格式，由 JavaScript 对象字面量形式派生而来。看着像对象，本质是字符串。JSON 格式简洁明了，易于阅读和编写，支持各种编程语言，因此被广泛应用于网络数据传输。

JSON 由键值对组成，键和值之间用冒号（:）分隔，每个键值对之间用逗号（,）分隔，整个 JSON 对象要用花括号（{}）括起来。键是一个字符串，值可以是字符串、数字、布尔值、数组、对象和 null 等类型。

例如，下面是一个简单的 JSON 对象，表示一个人的基本信息：

{
  "name": "Tom",
  "age": 18,
  "gender": "male",
  "hobbies": ["reading", "swimming", "traveling"],
  "address": {
    "city": "Beijing",
    "street": "Xueyuan Road",
    "zip": "100000"
  }
}

JSON 被广泛应用于 Web 应用程序，主要用于前端与后端之间的数据交换。在 AJAX 中，可以使用 JavaScript 中的 JSON.parse() 方法把 JSON 格式的字符串转换为 JavaScript 对象。

常见的HTTP方法有哪些？

1. GET： 用于请求访问已经被URI（统一资源标识符）识别的资源，可以通过URL传参给服务器
2. POST：用于传输信息给服务器，主要功能与GET方法类似，但一般推荐使用POST方式。
3. PUT： 传输文件，报文主体中包含文件内容，保存到对应URI位置。
4. HEAD： 获得报文首部，与GET方法类似，只是不返回报文主体，一般用于验证URI是否有效。
5. DELETE：删除文件，与PUT方法相反，删除对应URI位置的文件。
6. OPTIONS：查询相应URI支持的HTTP方法

HTTP与HTTPS的区别：

先说一下什么是HTTP？？HTTP是基于TCP/IP的关于数据如何在万维网中如何通信的协议。

1. 安全性：HTTPS 基于SSL/TLS 协议的 HTTP 协议，通过在传输层加密数据可以提供更高的安全性。相反，HTTP 不提供任何安全保障，明文传输容易被窃听。
2. 加密方式： HTTPS 通过 SSL/TLS 协议使用非对称加密（公钥加密）和对称加密（私钥加密）的结合方式来保护数据。HTTP 传输的数据都是明文的。
3. 连接方式：HTTPS 连接需要经过握手认证，浏览器与服务器之间需要进行一系列的握手和协商才能建立连接，建立连接后收发数据都会加密。而 HTTP 连接是随时可以断开、随时可以建立的。
4. 端口：HTTP 使用 80 端口，HTTPS使用 443 端口。
5. 费用：HTTPS 协议需要到CA申请证书，一般免费证书较少，因而需要一定费用。

综上所述，HTTPS 提供了更高的安全性，适合传输敏感信息的数据，如银行卡信息、用户密码等。而 HTTP 则适合一些不需要保密的信息传输，如浏览某些公开网站，获取新闻资讯等。

HTTP请求的完全过程

1）域名解析

2） 发起TCP的3次握手

3） 建立TCP连接后浏览器给服务器发起http请求

4） 服务器响应http请求，浏览器得到html代码

5） 浏览器解析html代码，并请求html代码中的资源（如js、css、图片等）

6） 关闭TCP连接，浏览器对页面进行渲染呈现给用户

TCP三次握手

第一次握手，客户端发了个连接请求消息到服务端，服务端收到信息后知道自己与客户端是可以连接成功的，但此时客户端并不知道服务端是否已经接收到了它的请求，所以服务端接收到消息后得应答，客户端得到服务端的反馈后，才确定自己与服务端是可以连接上的，这就是第二次握手。

如果只有两次握手，那么到这里，连接就建立了，但是此时客户端并没有任何数据要发送，而服务端还在傻傻的等候佳音，造成很大的资源浪费。所以需要第三次握手，只有客户端再次回应一下，就可以避免这种情况。

所谓四次挥手（Four-Way Wavehand）即终止TCP连接

具体可参考：TCP三次握手，这是我见过最好的解读了

http协议返回码的含义

区分状态码
1××开头 - 信息提示
2××开头 - 请求成功
3××开头 - 请求被重定向
4××开头 - 请求错误
5××开头 - 服务器错误

常见状态码
200 - 请求成功，从客户端发送给服务器的请求被正常处理并返回
400 - 服务器不理解请求，请求报文中存在语法错误
403 - 服务器拒绝请求（访问权限出现问题）
404 - 请求页面错误
500 - 服务器内部错误，无法完成请求
503 - 服务器超过最大负荷

TCP和UDP的区别

TCP（Transmission Control Protocol，传输控制协议）是基于连接的协议，也就是说，在正式收发数据前，必须和对方建立可靠的连接。一个TCP连接必须要经过三次“对话”才能建立起来

UDP（User Data Protocol，用户数据报协议）是与TCP相对应的协议。它是面向非连接的协议，它不与对方建立连接，而是直接就把数据包发送过去！ UDP适用于一次只传送少量数据、对可靠性要求不高的应用环境

说说网络分层里七层模型是哪七层

应用层：允许访问OSI环境的手段

表示层：对数据进行翻译、加密和压缩

会话层：建立、管理和终止会话

传输层：提供端到端的可靠报文传递和错误恢复

网络层：负责数据包从源到宿的传递和网际互连

数据链路层：

物理层：通过媒介传输比特,确定机械及电气规范

具体可参考：前端面试题整理—HTTP篇

webpack常用的loader和plugin有哪些？

loader：

1. style-loader：将CSS样式注入到HTML文档中，以使得样式生效。

2. css-loader：解析CSS文件，并处理依赖关系，如@import和url()。

3. sass-loader，less-loader，stylus-loader：css预处理器

4. postcss-loader：使用PostCSS处理CSS文件。它允许在编译过程中对CSS进行转换、优化和前缀添加等操作，以提高浏览器的兼容性和性能

5. babel-loader：将ES6+的代码转换成ES5语法。

6. vue-loader：编译.vue文件

7. eslint-loader：检查代码是否符合规范，是否存在语法错误

8. file-loader：将文件输出到指定目录，并返回文件URL。

9. url-loader：图片，影音处理。

plugin：

1. HtmlWebpackPlugin：生成HTML文件，并自动引入打包后的JS、CSS等资源。
2. CleanWebpackPlugin：清理指定目录下的文件，以便重新打包。
3. CompressWebpackPlugin：用于将输出的资源进行压缩
4. DefinePlugin：定义全局变量，可在代码中直接使用。
5. ExtractTextWebpackPlugin：将CSS提取为单独的文件。
6. UglifyJsWebpackPlugin：压缩JS代码，减小文件体积。