webpack的作用

1.理解什么是webpack

 模块化打包机 或者 模块打包工具。

首先,认为它是一个工具,帮助我们更好的处理事情的。

其次,“打包”,如何理解? 假设我们需要寄快递。我们将许多的物品都放进了一个纸皮箱,然后进行封箱。 这就是打包。 对应到前端开发来说,就是将很多的的 css文件,js文件,图片等“物品”,全都写进一个js文件,而不是在一个html页面通过script,link标签去引入多个静态资源。

模块化,其实不同的css,不同的js就是一个模块。比如说,一个index.html,通常会有一个index.css,

一个index.js,还有其他的css,js。这些不同的文件都可以看做不同的模块。不同的模块有各自的作用。

总结来说:用这个工具,帮助我们将不同的资源和文件,进行打包,也就是合并在一个文件里面。 但是不仅仅

如此,它还附加了一些更好用的功能。

附加功能:

1.CSS 预处理。将 Less, Sass 编译成css

2.ES6 语法 转成 ES5 …

2.作用

进行重新加载编译。实际就是将浏览器不认识的语法编译成浏览器认识的语法。比如less

编译成css,ES6 语法 转成 ES5等等。

将多个js文件合并成一个JS文件并压缩 减少的js体积

减少io请求。通常我们在请求后,会返回一个html到浏览器。这时,我们如果打开控制台,就会发现在html页面通过script,link等标签引用的静态资源, 浏览器会再次发出请求去获取这些资源。但是webpack的打包,将所有的静态资源都合并好了,减少了io请求。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 在现在的前端开发中,前后端分离、模块化开发、版本控制、文件合并与压缩、mock数据等等一些原本后端的思想开始...
    Charlot阅读 5,542评论 1 32
  • 写在开头 先说说为什么要写这篇文章, 最初的原因是组里的小朋友们看了webpack文档后, 表情都是这样的: (摘...
    Lefter阅读 5,357评论 4 31
  • 概要 64学时 3.5学分 章节安排 电子商务网站概况 HTML5+CSS3 JavaScript Node 电子...
    阿啊阿吖丁阅读 9,426评论 0 3
  • 前端开发面试题 面试题目: 根据你的等级和职位的变化,入门级到专家级,广度和深度都会有所增加。 题目类型: 理论知...
    怡宝丶阅读 2,625评论 0 7
  • 前端将大型项目分成一个个单独的模块,一般封装好的每个模块都会实现一个目的明确的完成的功能。如何处理这些模块以及模块...
    pixels阅读 3,458评论 1 14