这是我参与「第四届青训营 」笔记创作活动的第13天

重点

• webpack实例 配置 应用方法
• loader组件
• 插件
• 学习webpack方法

Webpack

什么是Webpack

前端资源编译、打包工具

打包核心流程

实例

安装

安装配置文件

执行编译命令

核心流程

模块化 + 一致性

webpack配置分类

流程类：作用于流程中某个 或 若干个环节 直接打包效果的配置项

webpack.js.org/configurati…

使用Webpack

1.声明入口entry 2.声明产物出口output 3.运行npx webpack

处理CSS文件

1.安装loader 2.添加module处理css文件 test：满足于test条件的才可以处理

use：使用哪种loader

运行结果

思考题

github.com/webpack-con… mp.weixin.qq.com/s/TPWcB4MfV… webpack.js.org/loaders/sty…

接入babel

babel：为了适应 将高层次js编译为低层次的工具

1.安装依赖

2.声明产物出口output，添加module

3.执行npx webpack

运行结果

思考题

webpack.js.org/loaders/bab… babeljs.io/ babeljs.io/docs/en/bab… babeljs.io/docs/en/bab… babeljs.io/docs/en/bab…

生成HTML

1.安装依赖

2.声明产物出口output

3.执行npx webpack

运行结果

思考题

webpack.js.org/plugins/htm…

工具线

HMR

即时更新修改

1.开启HMR devServer里hot：true

2.启动webpack

原理

mp.weixin.qq.com/s/cbYMpuc4h…

tree-shaking

删除dead code

使用方法

开启tree-shaking

• 1.mode：production
• 2.optimization.usedExports : true

其他工具

Loader组件

认识loader

webpack只认识JS，loader将非JS资源转化为标准JS

使用loader

安装loader 添加module

链式使用

其他特性

• 链式执行
• 支持异步执行
• 分normal pitch两分钟模式

编写loader

mp.weixin.qq.com/s/TPWcB4MfV…

常见loader

mp.weixin.qq.com/s/TPWcB4MfV…

plugin插件

什么是插件

插件使用方法

dashboard插件

html插件+define插件

html插件

钩子

mp.weixin.qq.com/s/tXkGx6Ckt… mp.weixin.qq.com/s/SbJNbSVzS…

如何学习Webpack

知识框架

总结

学了webpack的作用 理解了配置结构，loader的作用和常见loader以及插件基本形态与作用