前端面试题整理—Webpack篇

1、什么是webpack，与grunt和gulp有啥不同

　　webpack是一个模块打包工具，在webpack里面一切皆模块
　　通过loader转换文件，通过plugin注入钩子，最后输出有多个模块组合成的文件
　　WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到Js模块以及其它的一些浏览器不能直接运行的拓展语言，并将其打包为合适的格式以供浏览器使用

　　Gulp/Grunt是一种能够优化前端的开发流程的工具，而WebPack是一种模块化的解决方案，不过Webpack的优点使得在很多场景下可以替代Gulp/Grunt类的工具
　　Grunt和Gulp的工作方式是：在一个配置文件中，指明对某些文件进行类似编译，组合，压缩等任务的具体步骤，工具之后可以自动替你完成这些任务
　　Webpack的工作方式是：把你的项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到你的项目的所有依赖文件，使用　　loaders处理它们，最后打包为一个（或多个）浏览器可识别的JavaScript文件
　　gulp和grunt需要开发者将整个前端构建过程拆分成多个Task，并合理控制所有Task的调用关系
　　webpack需要开发者找到入口，并需要清楚对于不同的资源应该使用什么Loader做何种解析和加工

2、webpack的优缺点

　　优点：
　　1）专注于处理模块化的项目，能做到开箱即用，一步到位
　　2）可通过plugin扩展，方便、灵活　　
　　3）社区庞大活跃，经常引入新特性
　　4）良好的开发体验
　　webpack的缺点是只能用于采用模块化开发的项目

3、分别介绍bundle，chunk，module是什么

　　bundle:是由webpack打包出来的文件
　　chunk:代码块，一个chunk由多个模块组合而成，用于代码的合并和分割
　　module:是开发中的单个模块，一个模块对应一个文件，webpack会从配置的entry中递归开始找出所有依赖的模块

4、什么是loader？什么是plugin，两者区别

　　loader：模块转换器，用于把模块原内容按照需求转换成新内容
　　通过使用不同的Loader，Webpack可以要把不同的文件都转成JS文件,比如CSS、ES6/7、JSX等

　　plugin：扩展插件
　　在 Webpack 构建流程中的特定时机注入扩展逻辑来改变构建结果或做你想要的事情
　　一个插件是含有apply方法的一个对象，通过这个方法可以参与到整个webpack打包的各个流程

　　loader是用来对模块的源代码进行转换,而插件目的在于解决 loader 无法实现的其他事
　　因为plugin可以在任何阶段调用,能够跨Loader进一步加工Loader的输出

5、什么是模块热更新？

　　模块热更新是webpack的一个功能，他可以使得代码修改过后不用刷新浏览器就可以更新，是高级版的自动刷新浏览器

　　devServer中通过hot属性可以空时模块的热替换

//通过配置文件
        const webpack = require('webpack');
        const path = require('path');
        let env = process.env.NODE_ENV == "development" ? "development" : "production";
        const config = {
          mode: env,
         devServer: {
             hot:true
         }
        }
          plugins: [
             new webpack.HotModuleReplacementPlugin(), //热加载插件
          ],
        module.exports = config;

6、几个常见的plugin和常见的loader

　　plugin:
　　html-webpack-plugin 为html文件中引入的外部资源，可以生成创建html入口文件
　　mini-css-extract-plugin 分离css文件
　　clean-webpack-plugin 删除打包文件
　　HotModuleReplacementPlugin 热更新应用
　　copy-webpack-plugin 拷贝静态文件
　　terser-webpack-plugin 通过TerserPlugin压缩ES6代码

　　loader:
　　css-loader 加载 CSS，支持模块化、压缩、文件导入等特性
　　image-loader 加载并且压缩图片文件
　　babel-loader 把 ES6 转换成 ES5
　　style-loader 把 CSS 代码注入到 JavaScript 中，通过 DOM 操作去加载 CSS
　　file-loader 把文件输出到一个文件夹中，在代码中通过相对 URL 去引用输出的文件
　　source-map-loader 加载额外的 Source Map 文件，以方便断点调试

7、如何可以自动生成webpack配置？

　　webpack-cli /vue-cli /etc ...脚手架工具

8、webpack-dev-server和http服务器如nginx有什么区别?

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

9、webpack构建过程　

　　从entry里配置的module开始递归解析entry依赖的所有module
　　每找到一个module，就会根据配置的loader去找对应的转换规则
　　对module进行转换后，再解析出当前module依赖的module
　　这些模块会以entry为单位分组，一个entry和其所有依赖的module被分到一个组Chunk
　　最后webpack会把所有Chunk转换成文件输出
　　在整个流程中webpack会在恰当的时机执行plugin里定义的逻辑

10、什么是entry,output

　　entry入口，告诉webpack要使用哪个模块作为构建项目的起点，默认为./src/index.js

　　output出口，告诉webpack在哪里输出它打包好的代码以及如何命名，默认为./dist

11、webpack如何配置单页面和多页面的应用程序？

        //单个页面
        module.exports = {
            entry: './path/to/my/entry/file.js'
        }
        //多页面应用程序
        module.entrys = {
            entry: {
                pageOne: './src/pageOne/index.js',
                pageTwo: './src/pageTwo/index.js'
            }
        }

12、什么是长缓存？在webpack中如何做到长缓存优化？

　　浏览器在用户访问页面的时候，为了加快加载速度会对用户访问的静态资源进行存储，但是每一次代码升级或更新都需要浏览器下载新的代码，最简单方便的方式就是引入新的文件名称
　　webpack中可以在output中指定chunkhash，并且分离经常更新的代码和框架代码。通过NameModulesPlugin或HashedModuleIdsPlugin使再次打包文件名不变

前端面试题整理—Webpack篇

猜你喜欢