webpack快速学习2

webpack结合bable的使用
bable主要是用来处理ES2015也就是ES6的,由于ES6的一些代码有的浏览器是不能直接解析的,所以就必须用bable将其转换为浏览可以解析的代码。这就是bable。
1.安装
这里写图片描述
这里面分别安装了babel-loader这个不用解释吧,还有就babel-core,这个就是babel。
然后是babel-preset-es2015,这是babel的预设,就是他解析ES6的。
2.添加预设 在根目录下创建一个名字为.babelrc的自定义文件,在里面添加预设
这里写图片描述
写成这样就行了
3.配置文件中添加babel的配置
这里写图片描述
4.写点es6的代码,比如讲name.js中的和entry.js中的代码改成es6的
这里写图片描述
这里写图片描述
5.然后运行webpack命令,看index网页
这里写图片描述
效果还能实现
webpack-dev-server模块热替换
1.先全局安装 webpack-dev-server 这里就不截图了
2.再本地安装,也不截图了就
3.启动webpack-dev-server并添加热替换这个参数
这里写图片描述
4.这个时候热交换就有了,同时开了一个8080的端口,通过改变css里的背景颜色,不用刷新页面就能直接变色,不信你试试。
webpack与react+模块热交换
1.安装一系列的组件
这里写图片描述
这里写图片描述
总共需要这么多,但是有的我们之前就装过,所以自己可以看哪个没有去装它,或者直接都再装一遍
2.修改预设文件
这里写图片描述
在这个预设文件的数组里添加react的预设
3.在配置文件中加入react-hot这个loader
这里写图片描述
4.把name.js改成react的
这里写图片描述
5.再把entry.js改为react的
这里写图片描述
6.在package.json文件夹中添加一对类似缩写或者是改变写法的一个参数
这里写图片描述
这样我们就不用在命令行中专门的去输入webpack-dev-server去启动端口了,直接输入npm run watch即可。
7.输入命令完成之后我们去看index
这里写图片描述
OK,可以了。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值