Webpack 知识体系|青训营笔记

这是我参与「第五届青训营 」伴学笔记创作活动的第十三天

课程重点知识

1. webpack定义解析
2. webpack使用方法
3. 理解loader
4. 理解插件

知识总结及实例

webpack定义解析

• why

手动管理劣势：

• what 将非js文件编译成js文件，再将其进行打包

webpack使用方法

示例

• 核心流程

• 本质下做的事情 ：模块化+一致性

• webpack按照配置可分为两类

• 使用webpack——处理CSS文件

• 使用webpack——接入Babel（处理js版本不同，babel将高版本的es版本转成低版本）

• 使用webpack——生成HTML（使用插件）

• 使用webpack——工具线

理解loader

• loader 作用：

将非JS转换成JS资源

• 使用loader

• 认识loader：链式调用

执行流程

• 如何编写loader

• 常见loader

理解插件

-why及what

• 理解插件

插件就是一个钩子

、

相关扩展

webpack官网：webpack.js.org

• 深度剖析 Webpack 系列
• 深入浅出 Webpack
• Webpack Book
• Configuration | webpack
• Awesome-webpack-4plus

个人总结

了解webpack体系及构建过程，可以熟练应用于实践中。