webpack-第01节：认识WebPack的做用

原文网址：http://jspang.com/2017/09/16/webpack3-2/

　　　

 

若是您已经在前端行业中，WebPack在业界的流行程度天然必备多说，成为了前端小白升级为前端工程师的必备技能。若是你对webpack还不够熟悉，那你在前端前进的脚步会受到阻碍，可是你幸运的搜索到了这篇文章。（可是文章可能不会讲解如何从1.0、2.0版本升级3.0版本的知识，而是直接讲解3.0的知识，因此你可能须要有一个空杯心态来学习）

在学习过程当中，我但愿你能每节看完文章后，均可以本身亲手作一作，若是你不做就不会出现错误，不出现错误，你就没办法增加经验，那你就什么都学不会。相信我，慢慢来，比较快。

 

前端为何须要WebPack？

如今的前端网页功能丰富，特别是SPA（single page web application 单页应用）技术流行后，JavaScript的复杂度增长和须要一大堆依赖包，还须要解决SCSS，Less……新增样式的扩展写法的编译工做。因此现代化的前端已经彻底依赖于WebPack的辅助了。

如今最流行的三个前端框架，能够说和webpack已经紧密相连，框架官方都推出了和自身框架依赖的webpack构建工具。

• React.js+WebPack
• Vue.js+WebPack
• AngluarJS+WebPack

今后能够看出，不管你前端走那条线，你都要有很强的Webpack知识，才能祝你成为这个框架领域的大牛。

什么是WebPack？

WebPack能够看作是模块打包机：它作的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Sass，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。在3.0出现后，Webpack还肩负起了优化项目的责任。

这段话有三个重点：

• 打包：能够把多个Javascript文件打包成一个文件，减小服务器压力和下载带宽。
• 转换：把拓展语言转换成为普通的JavaScript，让浏览器顺利运行。
• 优化：前端变的愈来愈复杂后，性能也会遇到问题，而WebPack也开始肩负起了优化和提高性能的责任。

咱们能够从下图再次了解一下WebPack的做用:

安装WebPack

看了这么久，必定着急动手做一做了。要使用WebPack就要先进行安装，就和你要使用微信，必须在手机上下载微信的APP同样，可是不一样的是WebPack的安装，采用的是命令行npm形式的安装。

这里我以windows系统为例，给你们作截图示范。苹果安装稍有不一样，不过大同小异（若是有问题，能够直接进群交流，进群方法看文章开头）。

具体安装方法：

用win+R打开运行对话框，输入cmd进入命令行模式。而后找到你想开始项目的地方，输入下方代码：

 

1 2	mkdir webpack_demo cd webpack_demo

第一句是创建一个文件夹，第二句是进入这个文件夹。这个文件夹就是咱们的项目文件目录了，文件夹创建好后，能够经过下面命令安装WebPack。

须要注意的是,你在执行下一步时必须安装node，能够经过 node -v来查看node安装状况和版本，若是没有安装，要先安装node才能够继续进行。

 

1 2	//全局安装 npm install -g webpack

若是你这时安装失败了（出现了报错信息），通常有三种可能：

• 检查你node的版本号，若是版本号太低，升级为最新版本。
• 网络问题，能够考虑使用cnpm来安装（这个是淘宝实时更新的镜像）,具体能够登陆cnpm的官方网站学习http://npm.taobao.org/。
• 权限问题，在Liux、Mac安装是须要权限，若是你是Windows系统，主要要使用以管理员方式安装。请在命令前加sudo  便可

注意：全局安装是能够的，可是webpack官方是不推荐的。这会将您项目中的 webpack 锁定到指定版本，而且在使用不一样的 webpack 版本的项目中，可能会致使构建失败。

对项目目录进行安装

全局安装完成后，咱们还要进行一个项目目录的安装。在用npm安装前，咱们先要进行一下初始化，初始化的主要目的是生成package.json文件（这是一个标准的npm说明文件，里面蕴含了丰富的信息，包括当前项目的依赖模块，自定义的脚本任务等等，若是你对此文件还不了解，能够看看node 的相关知识）。

在命令行输入：

 

1

npm init

输入完成后，npm终端会问你关于项目的名称，描述……一堆内容，若是你不考虑发布到npm上，这些内容都不重要，并且咱们后期还能够用文本的形式修改这些内容。如今咱们只要一路回车就完成了初始化。这时用dir命令已经能够看到生成的package.json文件了。

输入下面命令进行项目目录的安装：

 

1	npm install --save-dev webpack

这里的参数–save是要保存到package.json中，dev是在开发时使用这个包，而生产环境中不使用。

开发环境and生产环境：

• 开发环境：在开发时须要的环境，这里指在开发时须要依赖的包。
• 生产环境：程序开发完成，开始运行后的环境，这里指要使项目运行，所须要的依赖包。

查看webpack版本

你安装好后，会想知道你如今webpack版本，在工做中交流时，也会常常问到你，你的打包版本是什么？这时候咱们能够用下面的命令进行查看。

 

1	webpack -v

能够看到我如今的版本的3.6.0版本，这是目前（2017/9/16）最新的版本了。出现了版本号，也说明你的webpack安装成功了。

看到这里，咱们第一节的内容就完成了，我建议你停一下，把webpack安装到你的电脑上，再进行向下观看，若是在安装时遇到什么问题，能够在下方的留言区给我留