这是我参与「第五届青训营」伴学笔记创作活动的第十二天
一、本堂课重点内容
- 什么是 Webpack
- Webpack 打包核心流程
- Loader 组件
- Plugin 组件
- 如何学习 Webpack
- 入门级：学会灵活应用
- 进阶：学会扩展 Webpack
- 大师：源码级理解 Webpack 打包编译原理
二、详细知识点介绍
- 前端项目由资源构成。
- Webpack本质是一种前端资源编译、打包工具
- babel是一种将es6语法转换为浏览器能解析的es5语法的一种工具，我们在以es6语法写业务逻辑代码的时候，通过webpack打包后在浏览器运行，由于目前浏览器对es6语法的支持情况不同，有些浏览器不能解析es6语法，导致我们的代码运行受阻。
- less-loader:实现less=>css的转换。
- css-loader:将css包装成类似module.export="${css}"的内容，包装后的内容符合JavaScript的语法。
- style-loader:将css模块包进require语句，并在运行时调用injectStyle等函数将内容注入到页面的style标签。
- 插件可以提高软件的可扩展性，可以控制主程序的复杂度，可以控制程序的体积，做到按需引入。
三、课后个人总结
我之前在学vue的时候看到过webpack，加上有脚手架，于是对webpack不是很在意，今天看了课之后，理解了前端“工程化”的概念、工具、目标，也是高阶前端必经之路，之前老师开玩笑说：“惹谁也不能惹会webpack的人”，现在想想，还真是这样。
babel:babel就可以很好的解决一些兼容性的问题，让程序员专注于写代码，降低了学习的成本。
构造函数主要用来创建对象时完成对对象属性的一些初始化操作，当某个特定的时候，钩子函数会自动执行。
