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

前端“工程化，核心竞争力，高阶前端

• 什么是 Webpack

• • 资源大管家😎

使用Webpack

• Webpack打包核心流程

• • 示例
  • Entry => Dependencies Lookup =>Transform => Bundle => Output
  • 关键配置项介绍
• 
• 
• 

1.   处理CSS

     问题:

   • Loader有什么作用?为什么这里需要用到css-loader、style-loader
   • 与旧时代—在HTML文件中维护css相比,这种方式会有什么优劣处?
   • 有没有接触过Less、Sass、Stylus这一类CSS预编译框架?如何在 Webpack接入这些工具?

     接入Babel

   

     思考题:

   • Babel具体有什么功能?
   • Babel 与 Webpack分别解决了什么问题?为何两者能协作到一起了?

• 生成HTML

• 
•   思考题:
•   -相比于手工维护HTML内容，这种自动生成的方式有什么优缺点?

•   工具线

• 

•   HMR（模块热替换）

• 
• 
• 

思考题:

-除上面提到的内容,还有哪些配置可划分为“流程类”配置?-工具类配置具体有什么作用?包括devtool/cache/stat等

理解Loader

webpack只认识JS

非JS-》JS

思考题︰

• Loader输入是什么?要求的输出是什么?

• Loader的链式调用是什么意思?如何串联多个Loader ?

• Loader 中如何处理异步场景?

认识插件

思考题∶

• Loader与插件有什么区同点?

• “钩子”有什么作用?如何监听钩子函数?

• 如何学习Webpack

• • 入门级:学会灵活应用
  • 进阶:学会扩展 Webpack
  • 大师:源码级理解 Webpack打包编译原理

参考

Webpack 5 知识体系 - GitMind

【前端专场 学习资料五】第五届字节跳动青训营 - 掘金

Webpack掘金课程