webpack面试题
# Webpack
面试题
# 谈谈 webpack 原理
- 初始化参数
- 开始编译:初始化
compiler
对象 - 确定入口
- 编译模板:调用
loader
- 完成模板编译:得到
loader
翻译后的所有模块 - 输出资源:根据入口和模块之间的依赖关系,组装成一个个包含多个模块的
chunk
,再把每个chunk
转换成一个单独的文件加入到输出列表,这步是可以修改输出内容的最后机会 - 输出完成:在确定好输出内容后,根据配置确定输出的路径和文件名,把文件内容写入到文件系统
# loader
作用
- 加载文件
- 转换文件
# plugins
作用
- 打包优化
- 资源管理
- 注入环境变量
- 在
Webpack
运行的生命周期中会广播出许多事件,Plugin
可以监听这些事件,在合适的时机通过Webpack
提供的API
改变输出结果
# webpack 的生命周期
- entry-options:option初始化
- compile:开始编译
- make:分析入口文件创建模板对象(compile中触发make事件并调用addEntry找到入口js文件,进行下一步的模块绑定)
- build-module:构建模块
- after-compile:完成所有模块构建结束编译过程
- emit:compiler开始输出生成的assets、插件;有最后的机会修改输出内容
- after-emit:输出完成
# webpack 性能优化
# 开发环境
- 优化代码调试(选择合适
source-map
)
- source-map: 外部
- inline-source-map: 内联;`内联和外部的区别:外部生成了文件,内联没有,内联构建速度会更快`
- hidden-source-map: 外部
- evel-source-map: 内联;`eval-source-map 和 inline-source-map 的区别:inline-source-map只会生成一个内联 sourceMap,eval-source-map 每个文件都会生成一个 sourceMap`
- nosource-source-map: 外部
- cheap-source-map: 外部
- cheap-module-source-map: 外部
1
2
3
4
5
6
7
2
3
4
5
6
7
HMR
devServer: { hot: true }
作用:一个模块发生变化,只会重新打包这一个模块(而不是打包所有模块)极大提升构建速度- 样式文件:可以使用 HMR 功能:因为 style-loader 内部实现了
- js 文件:默认不能使用 HMR 功能 --> 需要修改 js 代码,添加支持 HMR 功能的代码
注意:HMR 功能对 js 的处理,只能处理非入口 js 文件的其它文件 - html 文件:默认不能使用 HMR 功能,同时会导致问题:html 文件不能热更新了(不用做 HMR)
解决:修改入口文件,将 html 引入
Dll
DllPlugin
:将模块预先编译,只需编译一次(不易变的文件,一般为各类库,如:vue.js, axios。需要在 externals 中声明 build 被 DllPlugin 预编译的库)DllReferencePlugin
:将预先编译好的模块关联到当前编译中 (将通过 DllPlugin 编译好的文件引入到 index.html 中)
开启缓存
- babel 缓存
cacheDirectory:true
|- 让第二次打包构建速度更快
- 文件资源缓存
hash
:每次 webpack 构建时会生成一个唯一的 hash 值
问题:因为 js 和 css 同时使用一个 hash 值
|- 如果重新打包,会导致所有缓存失效。(可能我却只改动一个文件)chunkhash
:根据 chunk 生成的 hash 值。如果打包来源于同一个 chunk,那么 hash 值就一样
问题:js 和 css 的 hash 值还是一样的
|- 因为 css 是在 js 中被引入的,所以同属于一个 chunkcontenthash
:根据文件的内容生成 hash 值。不同文件 hash 值一定不一样
|- 让代码上线运行缓存更好使用
开启多线程
HappyPack
:多线程编译,加快编译速度(加快 loader 的编译速度),不建议与 thread-loader 一起使用thread-loader
:把这个 loader 放置在其他 loader 之前, 放置在这个 loader 之后的 loader 就会在一个单独的 worker 池(worker pool)中运行
使用 oneOf 匹配 loader
tree shaking
- 去除无用代码
- 前提:1、必须使用 es6 模块化;2、开启 production 环境
- 作用:减少代码体积
- 在
package.json
中配置
"sideEffects": false 所有代码都没有副作用(都可以进行tree shaking) 问题:可能会把css / @babel/polyfill(副作用)文件干掉 "sideEffects": ["*.css"]
1
2
3多入口打包
# 生产环境
- 比开发环境多一个文件压缩
uglifyjs-webpack-plugin
:用于 js 压缩mini-css-extract-plugin
:可以将样式文件从 bundle.js 抽离出来一个文件optimize-css-assets-webpack-plugin
:css 压缩,主要使用 cssnano 压缩器
- 其余内容同上(开发环境)
# webpack 常用的 plugin 和 loader
# 常用的 loader
file-loader
:把文件输出到一个文件夹中,在代码中通过相对 URL 去引用输出的文件url-loader
:和 file-loader 类似,但是能在文件很小的情况下以 base64 的方式把文件内容注入到代码中去source-map-loader
:加载额外的 Source Map 文件,以方便断点调试image-loader
:加载并且压缩图片文件babel-loader
:把 ES6 转换成 ES5css-loader
:加载 CSS,支持模块化、压缩、文件导入等特性style-loader
:把 CSS 代码注入到 JavaScript 中,通过 DOM 操作去加载 CSS。eslint-loader
:通过 ESLint 检查 JavaScript 代码
# 常用的 plugin
webpack-merge
:用于合并 webpack 的公共配置和环境配置(合并 webpack.config.js 和 webpack.development.js 或者 webpack.production.js)yargs-parser
: 用于将我们的 npm scripts 中的命令行参数转换成键值对的形式如--mode development
会被解析成键值对的形式mode: "development"
,便于在配置文件中获取参数clean-webpack-plugin
: 用于清除本地文件,在进行生产环境打包的时候,如果不清除 dist 文件夹,那么每次打包都会生成不同的 js 文件或者 css 文件堆积在文件夹中,因为每次打包都会生成不同的 hash 值导致每次打包生成的文件名与上次打包不一样不会覆盖上次打包留下来的文件progress-bar-webpack-plugin
: 打包编译的时候以进度条的形式反馈打包进度webpack-build-notifier
: 当你打包之后切换到别的页面的时候,完成时会在本地系统弹出一个提示框告知你打包结果(成功或失败或警告)html-webpack-plugin
: 自动生成 html,并默认将打包生成的 js、css 引入到 html 文件中mini-css-extract-plugin
: webpack 打包样式文件中的默认会把样式文件代码打包到 bundle.js 中,mini-css-extract-plugin 这个插件可以将样式文件从 bundle.js 抽离出来一个文件,并且支持 chunk cssadd-asset-html-webpack-plugin
: 从命名可以看出,它的作用是可以将静态资源 css 或者 js 引入到 html-webpack-plugin 生成的 html 文件中uglifyjs-webpack-plugin
: 代码丑化,用于 js 压缩(可以调用系统的线程进行多线程压缩,优化 webpack 的压缩速度)optimize-css-assets-webpack-plugin
: css 压缩,主要使用 cssnano 压缩器(webpack4 的执行环境内置了 cssnano,所以不用安装)friendly-errors-webpack-plugin
: 能够更好在终端看到 webapck 运行的警告和错误happypack
: 多线程编译,加快编译速度(加快 loader 的编译速度),注意,thread-loader 不可以和 mini-css-extract-plugin 结合使用splitChunks
: CommonChunkPlugin 的后世,用于对 bundle.js 进行 chunk 切割(webpack 的内置插件)DllPlugin
: 将模块预先编译,它会在第一次编译的时候将配置好的需要预先编译的模块编译在缓存中,第二次编译的时候,解析到这些模块就直接使用缓存,而不是去编译这些模块(webpack 的内置插件)DllReferencePlugin
: 将预先编译好的模块关联到当前编译中,当 webpack 解析到这些模块时,会直接使用预先编译好的模块(webpack 的内置插件)HotModuleReplacementPlugin
: 实现局部热加载(刷新),区别与在 webpack-dev-server 的全局刷新(webpack 的内置插件)
# Webpack
和 Gulp、Grunt
的不同
Gulp、Grunt
- 轻量化的任务
- 将打包各个阶段称为
task
,需要开发者自己去调用打包中各个阶段生成文件之后的task
任务(串行执行)
Webpack
- 打包大型应用
Webpack
打包过程中会发布各个事件,开发者只要在这些事件阶段中通过Webpack
提供的API
修改 编译产物。不需要开发者掌握整个打包流程中各个阶段如何工作(管理好自己需要管理的那部分即可)
# 如何看待 Webpack
和 Rollup
Webpack
是大型应用的打包,输出大量文件以及它们之间如何引用rollup
是JavaScript
类库的打包(注重最终输出一个js
文件)
# webpack 情景题
# 如果要将 .vue
文件中的 css
全部提取到一个 .css
文件中,为什么使用 plugin
,而不是 loader
?
答:plugin
可以在 Webpack
的 生命周期中执行,可以获取到编译完成后的所有文件,在合适的时机通过 Webpack
提供的 API
改变输出结果。loader
用来加载和编译转换文件,不适合做文件内容抽取和合并
上次更新: 2021/08/12, 09:28:42