乐趣区

关于前端:webpack入门学习笔记01-webpack基本简介

1. 写在后面

很多从事前端开发的程序员,都会接触到 webpack 十分相熟的概念,然而我想很多人对 webpack 只是只知其一; 不知其二,晓得这是一个打包器,能够将咱们编写的 Vue 代码、React 代码打包编译成原生的 JS 代码,不便浏览器辨认。

然而对于 webpack 更底层的常识,比方:如何配置 webpack,webpack 为什么能够对咱们的代码进行打包编译等,理解甚少。

所以借着这次学习 webpack 的机会,写一些文章,从一个前端小白的角度登程,一步步理解 webpack 的相干常识。心愿这些文章能够对那些前端小白有多帮忙。写得不好的中央,也请大家多多批评。

2. webpack 根本简介

什么是 webpack 呢,上面咱们引出 官网定义

webpack 是一个古代 JavaScript 应用程序的动态模块打包器 (module bundler)。当 webpack 解决应用程序时,它会递归地构建一个依赖关系图 (dependency graph),其中蕴含应用程序须要的每个模块,而后将所有这些模块打包成一个或多个 bundle。

说的直白一点,就是讲咱们的代码进行编译打包,变成可能被浏览器辨认的前端脚本。就拿一个 Vue 我的项目为例:

一开始咱们是用 Vue-cli 脚手架 疾速搭建一个我的项目,随后在我的项目中都是采纳 Vue 语法来编写咱们的我的项目,不仅如此,咱们还会应用 ES6 语法,还会应用 SCSS 等 CSS 预处理器等等。

这些语法咱们是相熟的,然而浏览器不意识呀,浏览器可能辨认的是原生 JS 语法,而且就目前状况来说,只能辨认 ES5 语法,不能辨认咱们应用的 ES6 语法。这就意味着,咱们的 Vue 我的项目是跑不起来的。这该怎么办呢?

这个时候 webpack 就开始施展它的作用了,webpack 通过剖析 Vue 语法、理清代码模块之前的依赖关系、剖析 SCSS 预处理器、剖析我的项目中援用的图片等动态资源等,将这些浏览器不辨认的语法进行打包编写编译,最终打包输入 .js、.css、.jpg、.png 等可能被浏览器辨认的语法和文件。如此一来,咱们的我的项目就能够顺利地在浏览器下面跑起来了。

3. webpack 的作用总结

联合下面的简略介绍,咱们来总结一下 webpack 的作用:

代码转换

webpack 能够将 ES6 语法转换为 ES5 语法,能够将 LESS、SASS 语法转换成 CSS 语法

文件优化

在 webpack 打包的过程中,能够合并文件,压缩文件体积

代码宰割、模块合并

在开发的过程中,将一些公共的模块进行抽离,造成独自的模块,不便其余模块进行调用

主动刷新

即咱们相熟的热更新,在开发过程中,webpack 会帮咱们启动一个本地服务,每当产生新代码的时候,该服务会主动刷新,然咱们看到最新的页面

代码校验

在开发过程中,webpack 能够帮忙咱们查看代码语法标准,缩小 bug 的数量

主动公布

我的项目开发实现之后,咱们能够借助 webpack 帮忙咱们主动公布代码,部署到服务器上

4. 后记

以上就是 webpack 学习笔记的开篇语,心愿接下来的一系列笔记,对你了解 webpack 会有所帮忙。大家加油!

退出移动版