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,可以了。