webpack
webpack 的运行流程
1、初始化参数 (基于shell和配置文件)
2、初始化编译: 初始化compiler, 加载 plugins, 开始编译
3、确定入口: 根据 entry 配置确定入口文件
4、编译模块: 从入口文件开始递归查找依赖, 使用loader编译模块, 得到编译后的模块及其相互依赖关系
5、组装代码块: 根据入口与模块的依赖关系组装出一个个包含一或多个模块的代码块 chunk , 加入到输出列表, 这是修改文件内容的最后机会
6、输出: 根据输出列表写入文件系统
输出的 bundle.js 分析
1、内容是一个立即执行函数, 参数是数组形式的所有模块, 每个模块都是一个函数
2、首先加载入口模块, 然后根据依赖关系加载依赖模块, 被加载过的模块会使用一个对象存放于内存中, 加载模块的目的是获取其 exports(CommonJS) 对象
3、模块函数在 webpack_require 中以call的方式被调用, 将模块内部的私有属性挂载到传入对象的 exports 属性上, 存入内存中
4、不同的代码块chunk被分割成不同文件, 通过jsonp的方式异步加载 (待详细补充)
加快构建速度(开发环境)
精准匹配 (路径查询和文件名匹配)：缩小文件的搜索范围(通过test/include/exclude), 目的是 减少loader转化的数量 和 加快匹配速度
适当降低文件监听的频率(减小poll值, 其表示监听赫兹), 提高编译延时(增大aggregateTimeout的值)
提高打包质量(生产环境)
代码的压缩混淆
webpack
entry 入口配置, 支持 单文件路径、文件路径数组(将创建多个主入口)
entry: { main: './main.js' } // 单入口写法
entry: './main.js' // 上一种的简写
entry: ['./main1.js', './main2.js'] // 多入口写法
entry: { // 对象语法, 扩展性最强
app: './src/app.js', // 应用脚本
vendors: './src/vendors.js' // 第三方库
}
entry: { // 多页应用, 为每个页面构建独立的依赖图
pageOne: './src/pageOne/index.js',
pageTwo: './src/pageTwo/index.js',
pageThree: './src/pageThree/index.js'
}
output 出口配置
filename // 输出文件名
path // 输出文件路径
占位符
loader 加载器, 可以处理非JS文件, 将他们转换为 webpack 可处理的有效模块
用法
test 匹配需要被处理的文件
use 使用指定的 loader
示例
npm install --save-dev css-loader
npm install --save-dev ts-loader
module: {
rules: [
{ test: /.css/, use: 'ts-loader' } // 处理所有的ts文件
]
}
特性
链式
同步/异步
接收查询参数
创建loader
plugins 插件, 比 loader 功能更加强大
mode 模式 development(开发环境) / production(生产环境)
modules 模块
webpack 可以识别的模块依赖
ES2015 import
CommonJS require()
AMD define 和 require()
css/sass/less @import
css中 url() 或 html 中 的连接
module resolution 模块解析
解析规则
绝对路径, 无需进一步解析
import "/home/me/file";
import "C:\Users\me\file";
相对路径, 使用import 或 require 的资源文件所在目录被认为上下文目录
import "../src/file1";
import "./file2";
模块路径
import "module";
import "module/lib/file";
manifest
缓存
热替换
常见面试题
1、loader和plugin有什么区别？
loader(资源转换器) 本质是一个函数, 对接收到的参数进行转换并返回转换后的结果, 常用于将非JS资源转换成webpack的可用模块
plugin(功能扩展) 是对webpack的扩展, 监听webpack生命周期中广播出来的事件, 并且可以通过webpack提供的api改变输出结果
2、webpack的构建流程？（初始化-编译-输出）
初始化参数 (基于shell和配置文件)
初始化编译: 初始化compiler, 加载 plugins, 开始编译
确定入口: 根据 entry 配置确定入口文件
编译模块: 从入口文件开始递归查找依赖, 使用loader编译模块, 得到编译后的模块及其相互依赖关系
组装代码块: 根据入口与模块的依赖关系组装出一个个包含一或多个模块的代码块, 加入到输出列表, 这是修改文件内容的最后机会
输出: 根据输出列表写入文件系统
3、webpack 模块打包原理？
4、文件监听原理？
通过轮询指定文件系统是否发生变化(最后修改时间)并保存, 默认300ms
5、webpack 热更新原理？https://www.jianshu.com/p/d35b6b33dee4
webpack 模块负责监听文件变化
WDS (web-dev-server) 模块负责刷新浏览器
WDS 与 代理客户端之间维护了一个websocket, 当 webpack 监听到本地资源变化时通知 WDS, WDS 通知代理客户端获取修改部分的代码块 chunk diff (chunk 需要更新的部分)
浏览器通过jsonp获取增量更新, 由 HotModulePlugin 来完成替换
6、如何对bundle体积进行监控和分析？
7、文件指纹是什么？
指打包输出的文件的后缀名
Hash：和整个项目的构建相关, 只要项目文件有修改, 整个项目构建的 hash 值就会更改
Chunkhash：和 Webpack 打包的 chunk 有关, 不同的 entry 会生出不同的 chunkhash
Contenthash：根据文件内容来定义 hash, 文件内容不变, 则 contenthash 不变
8、如何优化 Webpack 的构建速度？
9、简单描述一下编写loader的思路？
Loader 运行在 Node.js 中, 我们可以调用任意 Node.js 自带的 API 或者安装第三方模块进行调用
Webpack 传给 Loader 的原内容都是 UTF-8 格式编码的字符串, 当某些场景下 Loader 处理二进制文件时, 需要通过 exports.raw = true 告诉 Webpack 该 Loader 是否需要二进制数据
尽可能的异步化 Loader, 如果计算量很小, 同步也可以
Loader 是无状态的, 我们不应该在 Loader 中保留状态, 使用 loader-utils 和 schema-utils 为我们提供的实用工具
加载本地 Loader 方法
Npm link
ResolveLoader
module.exports = (content)=>{
return content.replace(/a/g, 'b')
}
10、简单描述一下编写Plugin的思路？
class EndWebpackPlugin {
constructor(doneCb, failCb) {this.doneCb = doneCb; this.failCb = failCb}
apply(compiler) {compiler.plugin('done', (state)=>{this.doneCb(state)})}
}
11、常见的 loader 和 plugin
vue-loader, less-loader, css-loader, style-loader, babel-loader
uglifyjs-webpack-plugin, HotModulePlugin, terser-webpack-plugin, CommonsChunkPlugin
