webpack面试知识点总结

webpack面试知识点总结

1.基本使用

（1）安装配置（分别设置common、Dev、prod 三个文件，并将common分别merge到另外两个文件中）、
（2） dev-server（在devserver中前端可以配置跨域代理 proxy、配置端口、根目录、进度条、浏览器自启动、启动gzip压缩）、
（3） 解析ES6(babel-loader将ES6转换为浏览器能读懂的ES5)、
（4） 解析样式（style-loader\css-loader\postcss-loader处理浏览器兼容性，执行顺序从后往前）、
（5） 解析图片文件（url-loader:在dev中直接使用file-loader引入图片的URL，在prod中在option中增加优化配置：如果小于5kb转base64limit:5*1024并且将打包路径改为img文件夹）、
（6） 了解常见loader和plugin（html-loader、css-loader、less-loader、hotModuleReplacementPlugin、IgnorePlugin等）

2.高级特性：

（1）多入口（当你的项目非单页面应用时可能需要配置多个入口文件，在common.webpack.js中建入口的时候要建两个entry中配置，在prod.webpack.js中output中filename:‘[name].[contentHash:8].js’,这里name代表入口文件的名称，contentHash:8代表将js文件名转译为8位哈希值（当代码不变的时候用作缓存 ，提升读取效率），在common.webpack.js中plugins要new两个plugins实例，并分别配置其引入的chunks名称）、
（2） 抽离和压缩css（在prod.webpack.js中使用MiniCssExtractPlugin.loader插件，在plugin中new此插件并配置filename为’css/main.[contentHash:8].css’ 来抽离css。安装terserJSPlugin\optimizeCssAssetsPlugin来压缩css）、
（3） 抽离公共代码和第三方代码（splitChunks中配置分割代码块并设置缓存分组cacheGroups，分为第三方模块和公共模块并分别为其命名，改名称应与多入口文件中的chunks名称一一对应 ）、
（4）懒加载(webpack支持引入动态数据：setTimeout(()=>{import(‘./dynamic.js’).then(res=>{console.log(res.result)}),2000})、
（5） 处理vue（vue-loader）

3.性能优化：

（1）优化构建速度：
1️⃣ babel-loader（use:babel-loader?cacheDirectory开启缓存/include:path.resolve(__dirname,‘src’)明确打包范围）、
2️⃣ IgnorePlugin（避免引入无用模块：new出IgnorePlugin实例。例如我们引入moment，其支持多种语言，但我们只用中文，则可以在打包时忽略moment的local文件，并在使用区域手动引入其语言包即可）、
3️⃣ noParse（在module中配置无需打包的文件，如xxx.min.js,但是已经引入）、
4️⃣ happyPack（多进程打包，如果项目较大打包较慢开启多进程可以提高速度，否则进程开销反而会降低速度）、
5️⃣ parallelUglifyPlugin（多进程代码压缩JS,放在prod里用）、
6️⃣ 自动刷新（只要配置了devServer就自动开启了）、
7️⃣ 热更新（新代码生效，网页不刷新，状态不丢失，在dev中引入HotModuleReplacementPlugin插件，在plugin里nre实例化这个插件，在devserve中配置hot:true，不能用于生产环境）、
8️⃣ DllPlugin（动态链接库插件，体积较大的第三方库提前打包好，只要版本不变每次构建的时候就无需重新打包，不能用于生产环境）
（2）优化产出代码：
体积更小，合理分包不重复加载，速度更快内存使用更少
1️⃣ 使用mode:production、(可以自动代码压缩、自动开启tree-shaking)
2️⃣ 小图片base64编码、
3️⃣ bundle加hash、
4️⃣ 提取公共改代码、
5️⃣ 懒加载、
6️⃣ scope hosting插件 将多个函数打包到一个函数中，使代码体积更小，创建函数作用于更少，提升可读性。
7️⃣ cdn:在output中配置publicPath,给打包好的文件配置增加cdn域名前缀，这样打包好的文件可以直接引用线上的资源

4.webpack面试常问问题及答案

1️⃣ 前端代码为何要进行构建和打包？
（1）代码层面：体积更小（tree-shaking、压缩合并加载更快）、编译高级语言或语法（TS\es6,模块化，css）、兼容性和错误检查。
（2）研发流程：统一高效的开发环境、统一的构建流程和产出标准、集成公司构建规范
2️⃣ module、 chunk、 bundle分别代表什么？
module是各个 源码文件，webpack中一切皆模块。chunk是多模块合并而成的，如entry、import()、splitChunk。bundle是最终输出的文件。
3️⃣loader和plugin的区别？
（1）Loader的主要作用是转换文件，Webpack原生只支持JavaScript和JSON文件，为了处理其他类型的文件，如CSS、图片等，需要使用Loader，这些Loader在Webpack的配置中被定义为规则(rules)，它们接收文件内容作为输入，并输出转换后的结果，例如，babel-loader可以将ES6代码转换为ES5，css-loader和style-loader可以处理CSS文件。
（2）Plugin的主要作用是扩展Webpack的功能，Plugin可以监听Webpack运行生命周期中的事件，并在特定的时机通过提供的API改变输出结果，例如，HtmlWebpackPlugin可以在HTML文件中自动引入打包后的JavaScript文件，或者CommonChunkPlugin可以提取第三方库和公共模块，以优化首屏加载速度。
总结来说，Loader专注于文件的转换，如代码的语言转换或资源文件的处理，而Plugin则提供更广泛的扩展性，可以监听Webpack的生命周期事件，并在关键点上改变输出结果。
4️⃣webpack如何实现懒加载？
webpack支持引入动态数据：
setTimeout(()=>{
import(‘./dynamic.js’).then(res=>{
console.log(res.result)})
,2000})
5️⃣webpack常见性能优化？
可答上面优化产出代码那部分的内容⬆
6️⃣babel和webpack的区别？
babel是一个JS新语法编译工具，不关心模块化
webPack是一个打包构建工具，是多个loader和plugin的集合