[INTERVIEW]Webpack

[kangkai124]

[kangkai124]

1. loaders是什么，作用？常用的loader？

webpack默认只支持 js 和 json 两种文件类型，通过 loaders 把其他类型的文件转为有效模块，这样就可以使用它们

loader 本身是个函数，接收源文件作为参数，返回转换的结果。

loader	描述
babel-loader	转换 es6+ 新特性
css-loader	css 文件的加载和解析
less-loader	less 转为 css
ts-loader	ts 转为 js
file-loader	图片，字体的加载和打包
raw-loader	将文件以字符串的形式导入
thread-loader	多进程打包js和css

[kangkai124]

2. plugins是什么，作用？常用的plugins？

插件用于 bundle 文件的优化，资源管理，环境变量的注入

作用于整个构建过程

名称	描述
SplitChunksPlugin	将 chunk 相同的模块代码提取成公共的 js
CleanWebpackPlugin	清理构建目录
MiniCssExtractPlugin	将 css 从 bundle 中提出来一个独立的 css 文件
CopyWebpackPlugin	将文件爱你或者文件夹拷贝到构建的输出目录
HtmlWebpackPlugin	创建 html 文件去承载输出的 bundle 文件
UglifyjsWebpackPlugin	压缩 js
ZipWebpackPlugin	将打包后的资源生成一个zip包

[kangkai124]

3. mode 不同参数区别？

| 选项 | 描述 |
| ----------- | ------------------------------------------------------------ |
| development | 会将 DefinePlugin 中 process.env.NODE_ENV 的值设置为 development。启用 NamedChunksPlugin 和 NamedModulesPlugin，这两个插件在热更新的时候会在控制台打印出热更新的模块和路径。 |
| production | 会将 DefinePlugin 中 process.env.NODE_ENV 的值设置为 production。启用 FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin 和 TerserPlugin，这些插件在自动压缩优化打包。 |
| none | 退出任何默认优化选项 |

ModuleConcatenationPlugin:  尝试将不同的模块预编译到一个闭包里

NoEmitOnErrorsPlugin: 编译出错时，跳过输出

[kangkai124]

4. 如何解析 css

css-loader: 加载 css 文件，并且转为 commonjs 对象

style-loader: 将样式通过 <style> 标签插入到 head 中

[kangkai124]

5. webpack 如何开启热更新？实现原理？

待总结

参考文章：
https://juejin.im/post/5c3ca02ce51d45451850250a
https://github.com/lihongxun945/diving-into-webpack/blob/master/7-hmr.md
https://www.jianshu.com/p/ff6450532e61
https://www.jianshu.com/p/652fbae768bf

[kangkai124]

6. 什么是文件指纹？如何生成？

即打包后输出的文件名的后缀

[hash]：和整个项目的构建相关，只要有文件修改，hash 值就会变

[chunkhash]：和 chunk 相关，不同的 entry 会生成不同的 chunkhash 值，打包输出 js 一般使用改值

[content]：根据文件的内容来定义 hash，一般 打包输出 css 使用该值

[kangkai124]

7. webpack Resolve的配置和作用

答案