记录Webpack的知识,待完善,备忘.
Webpack简单来说就是打包用的,它会打包各种文件,做到极致压缩我们的代码资源。打包可以使用插件，可以修改默认的打包入口和出口。如果不使用打包的插件的话,打包过后是js文件,为了能在浏览器中显示出来,我们需要借助html这个媒介,我们需要将打包出来的js引入一个html文件中.当然我们借助插件的话,插件会帮我们自动生成html文件,方便一点.
这篇文章,也会给予极大的参考.
我们为什么要使用Webpack进行打包?
在实际开发中,项目上线:前端用webpack把我们项目代码进行打包，然后交给公司后台人员发布到服务器的过程.
如果你们没有自动化打包的,手动部署，就手动打包完了把打包后的dist文件发给部署的人。不管是后端还是运维,打包后的那个dist文件夹里面的就是你写好的需要部署的代码.这个其实和Webpack关系不大,是属于前端部署的东西。
打包后的文件就是把你写的组件样式什么的都整合到一起,过程中还有把一些ES6的语法编译成ES5,把你写的那些jsx编译成一个个函数。最终只有一个html和几个CSS还有JS文件。
1.如何打包
2.修改打包的入口和出口
下图中main.js为自定义的打包入口,bundle.js为自定义的打包出口,打包成功后,会有一个dist文件夹
3.打包执行流程
上图中使用了yarn,我们也可以用npm,但是老师说yarn会更快一点.
4.Webpack打包后的js需要引入到html中使用,这样才能在浏览器中显示出来,不用插件的话,需要我们手动创建一个html文件.
5.如何自动生成html文件
6.如何使用插件
使用插件打包完成后如下图:
7.css文件为何不行
8.Webpack使用加载器
下图是安装两个加载器成功的截图
