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,可以了。
webpack快速学习2
最新推荐文章于 2022-07-29 11:14:09 发布