Webpack面试题

怎么使用HMR

在webpack的配置文件中配置devServer的hot:true，然后在需要热替换的模块当中手动执行webpack提供的方法

module.exports = {
	devServer:{
		hot:true
	}
}
1
2
3
4
5

module.hot.accept('module', () => {});
1

HMR热模块更新，有什么优点

模块热更新是webpack的一个功能，它可以使得代码修改之后，不用刷新浏览器就可以更新。

在应用过程中替换添加删出模块，无需重新加载整个页面，是高级版的自动刷新浏览器。

优点：只更新变更内容，以节省宝贵的开发时间。调整样式更加快速，几乎相当于在浏览器中更改样式

HMR原理是什么

webpack初次编译后监听文件的变化，当文件变化时重新编译

模块懒加载怎么实现

借助import()语法异步引入组件，实现文件懒加载：prefetch,preloadingwebpack提倡多写异步代码，提升代码利用率，从而提升页面性能先加载主业务文件，prefetch利用网络空闲时间，异步加载组件

import('module').then(moduleContent => {
	
});
1
2
3

打包的注意事项，提高速度

要支持CommonJS模块化规范，所以要求打包后的最后结果也遵守该规则。
Npm模块使用者的环境是不确定的，很有可能并不支持ES6，所以打包的最后结果应该是采用ES5编写的。并且如果ES5是经过转换的，请最好连同SourceMap一同上传。
Npm包大小应该是尽量小（有些仓库会限制包大小）
发布的模块不能将依赖的模块也一同打包，应该让用户选择性的去自行安装。这样可以避免模块应用者再次打包时出现底层模块被重复打包的情况。
UI组件类的模块应该将依赖的其它资源文件，例如.css文件也需要包含在发布的模块里。

怎么提高webpack构建速度

多入口情况下，使用CommonsChunkPlugin来提取公共代码

通过externals配置来提取常用库

利用DllPlugin和DllReferencePlugin预编译资源模块通过DllPlugin来对那些我们

引用但是绝对不会修改的npm包来进行预编译，再通过DllReferencePlugin将预编译的模块加载进来。

使用Happypack 实现多线程加速编译

使用webpack-uglify-paralle来提升uglifyPlugin的压缩速度。

原理上webpack-uglify-parallel采用了多核并行压缩来提升压缩速度使用Tree-shaking和Scope Hoisting来剔除多余代码

sourceMap是什么

是一个映射关系，将打包后的文件隐射到源代码，用于定位报错位置

配置方式:

例如：devtool：‘source-map’加不同前缀意义：

inline:不生成映射关系文件，打包进main.js
cheap: 1.只精确到行，不精确到列，打包速度快 2.只管业务代码，不管第三方模块
module：不仅管业务代码，而且管第三方代码
eval:执行效率最快，性能最好
最佳实践：开发环境：cheap-module-eval-source-map线上环境：cheap-mudole-source-map

长缓存以及如何实现

浏览器在用户访问页面的时候，为了加快加载速度，会对用户访问的静态资源进行存储，但是每一次代码升级或者更新，都需要浏览器去下载新的代码，最方便和最简单的更新方式就是引入新的文件名称。

在webpack中，可以在output给出输出的文件制定chunkhash，并且分离经常更新的代码和框架代码，通过NameModulesPlugin或者HashedModulesPlugin使再次打包文件名不变

tree-sharking是什么

指打包中去除那些引入了但在代码中没用到的死代码。在wepack中js treeshaking通过UglifyJsPlugin来进行，css中通过purify-CSS来进行。

文件指纹是什么，怎么用

作用：

1. 版本管理：只有修改的文件才需要更改文件指纹
2. 提高访问速度：浏览器有缓存

文件指纹的类型

hash：整个项目的构架相关，只要项目文件有修改，整个项目构建的hash值就会更改

chunkhash：和webpack打包的chunk有关，不同的entry会生成不同的chunkhash值

contenthash：根据文件内容来定义hash，文件内容不变，则contenthash不变

如何使用

module.exports = {
	output:{
		filename:'[name].[contenthash:8].js' // js文件设置文件指纹
	},
	module:{
		rules:[{
			test:/\.png$/,
			use:[{
			loader:'file-loader',
			options:{
				filename:'[name].[contenthash:8].[ext]' // 设置图片文件的文件指纹，其他文件的文件指纹与图片设置方式一致
			}
			}]
		}]
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

占位符说明

webpack-dev-server与http服务器的区别

webpack-dev-server使用内存来存储webpack开发环境下的打包文件，并且可以使用模块热更新，比传统的http服务对开发更加有效

webpack3和webpack4的区别

mode/–mode参数，新增了mode/–mode参数来表示是开发还是生产（development/production）production 侧重于打包后的文件大小，development侧重于goujiansud移除loaders，必须使用rules（在3版本的时候loaders和rules 是共存的但是到4的时候只允许使用rules）移除了CommonsChunkPlugin (提取公共代码)，用optimization.splitChunks和optimization.runtimeChunk来代替支持es6的方式导入JSON文件，并且可以过滤无用的代码

gulp与webpack的区别

三者都是前端构建工具，grunt和gulp在早期比较流行，现在webpack相对来说比较主流，不过一些轻量化的任务还是会用gulp来处理，比如单独打包CSS文件等。grunt和gulp是基于任务和流（Task、Stream）的。

类似jQuery，找到一个（或一类）文件，对其做一系列链式操作，更新流上的数据， 整条链式操作构成了一个任务，多个任务就构成了整个web的构建流程。webpack是基于入口的。

webpack会自动地递归解析入口所需要加载的所有资源文件，然后用不同的Loader来处理不同的文件，用Plugin来扩展webpack功能。

为什么要打包

代码层面：

体积更小（Tree-shaking、压缩、合并），加载更快
编译高级语言和语法（TS、ES6、模块化、scss）
兼容性和错误检查（polyfill,postcss,eslint）
研发流程层面：

统一、高效的开发环境
统一的构建流程和产出标准
集成公司构建规范（提测、上线）