17年技术胖webpack3.X学习笔记 01_项目管理_非技术区_程序员俱乐部

中国优秀的程序员网站程序员频道CXYCLUB技术地图
热搜:
更多>>
 
您所在的位置: 程序员俱乐部 > 非技术区 > 项目管理 > 17年技术胖webpack3.X学习笔记 01

17年技术胖webpack3.X学习笔记 01

 2017/10/23 2:47:12  p前端胖  程序员俱乐部  我要评论(0)
  • 摘要:一,为什么学Webpack现在的前端网页功能丰富,特别是SPA(singlepagewebapplication单页应用)技术流行后,JavaScript的复杂度增加和需要一大堆依赖包,还需要解决SCSS,Less……新增样式的扩展写法的编译工作。所以现代化的前端已经完全依赖于WebPack的辅助了。现在最流行的三个前端框架,可以说和webpack已经紧密相连,框架官方都推出了和自身框架依赖的webpack构建工具。React.js+WebPackVue.js+WebPackAngluar
  • 标签:笔记 Web 学习 技术 学习笔记

一,为什么学Webpack

 现在的前端网页功能丰富,特别是SPA(single page web application 单页应用)技术流行后,JavaScript的复杂度增加和需要一大堆依赖包,还需要解决SCSS,Less……新增样式的扩展写法的编译工作。所以现代化的前端已经完全依赖于WebPack的辅助了。 

现在最流行的三个前端框架,可以说和webpack已经紧密相连,框架官方都推出了和自身框架依赖的webpack构建工具。 

React.js+WebPack 

Vue.js+WebPack 

Angluar.js+WebPack 

从此可以看出,无论你前端走那条线,你都要有很强的Webpack知识,才能祝你成为这个框架领域的大牛。

首先要确保电脑里已经安装了node,然后是npm,不过现在的node已经自带了npm.至于怎么安装可以百度下。

二,安装webpack

Webpack可以使用npm安装,新建一个空的练习文件夹(此处命名为demo01),在cmd中转到该文件夹后执行下述指令就可以完成安装。

//全局安装
npm install -g webpack
//安装到你的项目目录
npm install --save-dev webpack

注意官方不推荐使用全局安装,所以我们来看看本地安装,首先在练习文件夹中创建一个package.json文件,这是一个标准的npm说明文件,里面蕴含了丰富的信息,包括当前项目的依赖模块,自定义脚本任务等等。在终端中使用 npm init 一路回车,最后一个选择yes就可以了。此时会自动创建这个package.json文件。

$ npm init

然后cmd中输入 class="js">npm install --save-dev webpack 本地安装webpack

如果安装失败,可能原因有3个,大家可以自查:

1,node版本过低。

2,网络问题,可以改用cnpm安装。

3,权限不够,mac加上sudo,win系统用管理员权限安装。

未完待续。。。

 



 

发表评论
用户名: 匿名