这是我参与「第四届青训营 」笔记创作活动的的第7天
为什么要学习Webpack？
- 理解前端“工程化”的概念、工具和目标
- 一个团队总要有那么几个人熟悉Webpack，某种程度上可以成为个人的核心竞争力
- 高阶前端的必经之路
文章目标
- 理解Webpack的基本用法
- 通过介绍Webpack功能、Loader与Plugin组件设计，建立一个人知识体系
什么是Webpack？
前端项目由许多资源构成
Webpack本质上是一种前端资源编译、打包工具
- 多份资源打包成一个Bundle
- 支持Babel、Eslint、TS、CoffeScript、Less、Sass
- 支持模块化处理css、图片等资源文件
- 支持HMR+开发服务器
- 支持持续监听、持续构建
- 支持代码分离
- 支持Tree-shaking
- 支持Sourcemap
- ...
Webpack打包核心流程
示例
- 安装
npm i -D webpack webpack-cli
- 编辑配置文件
webpack.config.js
module.exports={
entry:'main.js',
output:{
filename:"[name].js",
path:path.join(__dirname,"./dist"),
},
module:{
rules:[{
test:/\.less$/i,
use:['style-loader','css-loader','less-loader']
}]
}
}
- 执行编译命令
npx webpack
Entry→Dependencies Lookup→Transform→Bundle→Output
关键配置项介绍
流程类
工具类
Loader组件
核心功能
把非JS的资源转换成JS的资源
使用Loader
- 安装Loader
npm add -D css-loader style-loader
- 添加‘module’处理css文件
module.exports={
module:{
rules:[
{
text:/\.css/i,
use:[
"style-loader",
"css-loader"
"less-loader",
],
},
],
},
};
如何学习webpack
入门级：学会灵活应用
- 理解打包流程
- 熟练掌握常用配置项、Loader、 插件的使用方法，能够灵活搭建集成Vue、React、Babel、Eslint、Less、Sass、图片处理等工具的Webpack 环境
- 掌握常见脚手架工具的用法，例如：Vue-cli、create-react-app、@angular/cli
进阶：学会扩展Webpack
- 理解Loader、Plugin机制，能够自行开发Webpack组件
- 理解常见性能优化手段，并能用于解决实际问题
- 理解前端工程化概念与生态现状
大师：源码级理解Webpack打包编译原理
- 阅读源码，理解Webpack编译、打包原理，甚至能够参与共建
