Webpack 知识体系 | 青训营笔记
这是我参与「第五届青训营 」伴学笔记创作活动的第 13 天，学习了掘金视频课《前端入门——工具篇》第七节课程 “Webpack 定义解析” ，第八节课程 “Webpack 使用方法” ，第九节课程 “理解 Loader” ，第十节课程 “理解插件” ，以下为本次的学习笔记：
Webpack 定义解析
为什么要学习 Webpack
- 理解前端“工程化”概念、工具、目标
- 提高个人核心竞争力
- 成为高阶前端工程师的必经之路
Webpack 使用方法
Webpack打包核心流程
入口处理：从'entry' 文件开始，启动编译流程；
依赖解析：从'entry'文件开始，根据'require' or import' 等语句找到依赖资源；
资源解析：根据module' 配置，调用资源转移器，将png、css等非标准JS资源转译为JS内容；
资源合并打包：将转译后的资源内容0合并，打包为可直接在浏览器运行的JS文件； 递归调用2、3，直到所有资源处理完毕
- 示例
安装（注意用管理员权限打开命令行）
npm i -D webpack webpack-cli
1
编辑配置文件webpack.config.js
module.exports = {
entry: 'main.js', // 定义当前项目的入口文件
output: { // 定义当前项目的输出文件
filename: "[name].js",
path: path.join(__dirname, "./dist"),
},
module: {// 定义一些loader相关的内容，可在下文看到
rules: [{
test: /.less$/i,
use: ['style-loader', 'css-loader', 'less-loader']
}]
}
}
执行编译命令
npx webpack
模块化——一致性
- 多个文件资源合并成一个，减少http 请求数
- 支持模块化开发欧6
- 支持高级JS特性
- 支持Typescript、CoffeeScript方言
- 统一图片、CSS、字体等其它资源的处理模型
- Etc
使用Webpack接入Babel
- 安装依赖
- 声明入口
entry& 产物出口output - 添加module处理css文件
使用Webpack生成html
- 安装依赖
- 配置
- 执行
npx webpack
使用Webpack——HMR
Hot Module Replacement——模块热替换（写的代码会被立刻更新到浏览器上~）
- 开启HMR
- 启动webpack
使用Webpack——Tree-Shaking
Tree-Shaking -树摇，用于删除Dead Code
Dead Code
- 代码没有被用到，不可到达
- 代码的执行结果不会被用到
- 代码只读不写
Tree-Shaking
- 模块导出了，但未被其他模块使用
理解Loader
Loader核心功能：将非JS资源转换为JS资源
- 安装Loader
- 添加module处理less文件
认识Loader：链式调用 less-loader: 实现less => css的转换 css-loader: 实现css => js的转换，将CSS包装成类似module.exports = “${css}” 的内容，包装后的内容符合JavaScript 语法 style-loader：将css模块包进require语句，并在运行时调用injectStyle等函数将内容注入到页面的style标签
理解插件Plugin
插件架构精髓：对扩展开放，对修改封闭，其实就是开闭原则
