原文网址: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安装到你的电脑上,再进行向下观看,如果在安装时遇到什么问题,可以在下方的留言区给我留
原文地址:https://www.cnblogs.com/jinsuo/p/8351698.html