webpack学习笔记

joyful2 / 2023-07-20 / 原文

webpack:

 

todo:

1 webpack官方文档查漏补缺(常用功能)

2 使用webpack编码符合业务的配置
3 常用loader,plugins的了解和使用
 

 

 

 

 

 

 

 

 

 
学习目标:
1 知道能做什么,不能做什么
学会webpack常用功能
2 了解大致原理
知道webpack怎么工作,webpack结果文件怎么阅读
3 根据业务合理配置webpack
 
学习注意:
1 不要死记写法,记住规律
2 不要试图学会所有功能
3 了解原理,但没必要深入原理
 
课程安排: 概念讲解 + 基本使用演示 + 进阶使用演示(直播)+ 案例讲解(直播)
 
webpack:快速方便的完成项目 =》 工程化(系统化,模块化,规范化。自动化?)
 
webpack主要功能:
编译:js,sass,css,typescript
打包:压缩,打包
图片等资源的处理
tree-shaking等优化js工具
webpack-dev-server,eslint,热更新等
 
前端模块化:
模块化方案: commonjs(nodejs的规范) AMD/CMD/UMD(民间模块化规范) ES6 Module(官方模块化规范)
 
 
webpack配置文件: 我们的工作对象,决定webpack如何打包,打包成啥样。
 
webpack自身只能打包,且只能处理js,因此需要loader和plugin
 
 
 

核心概念: entry; output; loader; plugin

entry: 'app.js'    打包入口。 多个入口:entry: [app1.js,app2.js]; 多个入口和多个出口:entry: { app:'app.js', app:'app2.js'}

output 

loader: 用于处理各种后缀的文件,通常是编译用。

plugin: webpack的额外扩展。比如优化代码,提供功能。

 

 
 

 

 

 
 
 
 
 

webpack学习笔记更多相关文章