webpack面试题

webpack面试题

webpack

谈谈你对webpack的看法

webpack是一个模块打包工具,可以使用它管理项目中的模块依赖,并编译输出模块所需的静态文件。它可以很好地管理、打包开发中所用到的HTML,CSS,JavaScript和静态文件(图片,字体)等,让开发更高效。对于不同类型的依赖,webpack有对应的模块加载器,而且会分析模块间的依赖关系,最后合并生成优化的静态资源。

webpack的基本功能和工作原理?

  • 代码转换:TypeScript 编译成 JavaScript、SCSS 编译成 CSS 等等
  • 文件优化:压缩 JavaScript、CSS、HTML 代码,压缩合并图片等
  • 代码分割:提取多个页面的公共代码、提取首屏不需要执行部分的代码让其异步加载
  • 模块合并:在采用模块化的项目有很多模块和文件,需要构建功能把模块分类合并成一个文件
  • 自动刷新:监听本地源代码的变化,自动构建,刷新浏览器
  • 代码校验:在代码被提交到仓库前需要检测代码是否符合规范,以及单元测试是否通过
  • 自动发布:更新完代码后,自动构建出线上发布代码并传输给发布系统。

webpack构建过程

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

webpack打包原理

将所有依赖打包成一个bundle.js,通过代码分割成单元片段按需加载

什么是webpack,与gulp,grunt有什么区别

  • webpack是一个模块打包工具,可以递归地打包项目中的所有模块,最终生成几个打包后的文件。
  • 区别:webpack支持代码分割,模块化(AMD,CommonJ,ES2015),全局分析

什么是entry,output?

  • entry 入口,告诉webpack要使用哪个模块作为构建项目的起点,默认为./src/index.js
  • output 出口,告诉webpack在哪里输出它打包好的代码以及如何命名,默认为./dist

什么是loader,plugins?

  • loader是用来告诉webpack如何转换某一类型的文件,并且引入到打包出的文件中。
  • plugins(插件)作用更大,可以打包优化,资源管理和注入环境变量

什么是bundle,chunk,module?

bundle是webpack打包出来的文件,chunk是webpack在进行模块的依赖分析的时候,代码分割出来的代码块。module是开发中的单个模块

如何自动生成webpack配置?

可以用一些官方脚手架

  • webpack-cli
  • vue-cli

   
   
  1. // 首先安装
  2. npm install -g @vue/cli
  3. // 新建项目hello
  4. vue create hello
  5. 复制代码
  • nuxt-cli

   
   
  1. // 确保安装了npx,npx在npm5.2.0默认安装了
  2. // 新建项目hello
  3. npx create-nuxt-app hello
  4. 复制代码

webpack如何配置单页面和多页面的应用程序?

  • 单个页面

   
   
  1. module. exports = {
  2. entry: './path/to/my/entry/file.js'
  3. }
  4. 复制代码
  • 多页面应用程序

   
   
  1. module. entrys = {
  2. entry: {
  3. pageOne: './src/pageOne/index.js',
  4. pageTwo: './src/pageTwo/index.js'
  5. }
  6. }
  7. 复制代码

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

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

什么是模块热更新?

webpack的一个功能,可以使代码修改后不用刷新浏览器就自动更新,高级版的自动刷新浏览器

dev-server是怎么跑起来的

webpack-dev-server支持两种模式来自动刷新页面

  • iframe模式(页面放在iframe中,当发送改变时重载) 无需额外配置,只要以这种格式url访问即可。http://localhost:8080/webpack-dev-server/index.html
  • inline模式(将webpack-dev-server的客户端入口添加到bundle中) inline模式下url不用发生变化,但启动inline模式分两种情况

   
   
  1. // 以命令行启动webpack-dev-server有两种方式
  2. // 方式1 在命令行中添加--inline命令
  3. // 方式2 在webpack-config.js添加devServer:{inline: true}
  4. // 以node.js API启动有两种方式
  5. // 方式1 添加webpack-dev-server/client?http://localhost:8080/到webpack配置的entry入口点
  6. config. entry. app. unshift( "webpack-dev-server/client?http://localhost:8080/");
  7. // 将<script src="http://localhost:8080/webpack-dev-server.js"></script>添加到html文件中
  8. 复制代码

使用过webpack里面哪些plugin和loader

loader

  • babel-loader: 将ES6+转移成ES5-
  • css-loader,style-loader:解析css文件,能够解释@import url()等
  • file-loader:直接输出文件,把构建后的文件路径返回,可以处理很多类型的文件
  • url-loader:打包图片

   
   
  1. // url-loader增强版的file-loader,小于limit的转为Base64,大于limit的调用file-loader
  2. npm install url-loader -D
  3. // 使用
  4. module. exports = {
  5. module: {
  6. rules: [{
  7. test: /\.(png|jpg|gif)$/,
  8. use: [{
  9. loader: 'url-loader',
  10. options: {
  11. outputPath: 'images/',
  12. limit: 500 //小于500B的文件打包出Base64格式,写入JS
  13. }
  14. }]
  15. }]
  16. }
  17. }
  18. 复制代码

plugins

  • html-webpack-plugin: 压缩html

   
   
  1. const HtmlWebpackPlugin = require( 'html-webpack-plugin')
  2. module. exports = {
  3. //...
  4. plugins: [
  5. new HtmlWebpackPlugin({
  6. filename: 'index.html', // 配置输出文件名和路径
  7. template: './public/index.html', // 配置要被编译的html文件
  8. hash: true,
  9. // 压缩 => production 模式使用
  10. minify: {
  11. removeAttributeQuotes: true, //删除双引号
  12. collapseWhitespace: true //折叠 html 为一行
  13. }
  14. })
  15. ]
  16. }
  17. 复制代码
  • clean-webpack-plugin: 打包器清理源目录文件,在webpack打包器清理dist目录

   
   
  1. npm install clean-webpack-plugin -D
  2. // 修改webpack.config.js
  3. const cleanWebpackPlugin= require( 'clean-webpack-plugin')
  4. module. exports = {
  5. plugins: [ new cleanWebpackPlugin([ 'dist'])]
  6. }
  7. 复制代码

webpack中babel的实现

安装 npm i -D @babel-preset-env @babel-core babel-loader

  • @babel-preset-env:可以让我们灵活设置代码目标执行环境
  • @babel-core: babel核心库
  • babel-loader: webpack的babel插件,让我们可以在webpack中运行babel

配置.babelrc


   
   
  1. {
  2. "presets": [ '@babel/preset-env']
  3. }
  4. 复制代码

配置webpack.config.js


   
   
  1. module. exports = {
  2. entry: './src/index.js',
  3. output: {
  4. path: path. resolve(__dirname, 'dist'),
  5. filename: 'bundle.js'
  6. },
  7. module: {
  8. rules: [{
  9. test: /\.js$/,
  10. exclude: /node_modules/,
  11. use: { loader: 'babel-loader'}
  12. }]
  13. }
  14. }
  15. 复制代码

提取公用代码


   
   
  1. module. exports = {
  2. optimization: {
  3. splitChunks: {
  4. common: {
  5. // 抽离公共代码
  6. chunks: 'initial',
  7. name: 'common', // 打包后的文件名
  8. minChunks: 2, // 最小引用2次
  9. minSize: 0 // 超出0字节就生成一个新包
  10. },
  11. styles: {
  12. // 抽离公用代码
  13. name: 'styles',
  14. test: /\.css$/,
  15. chunks: 'all',
  16. minChunks: 2,
  17. enforce: true
  18. },
  19. vender: {
  20. // 抽离第三方插件
  21. test: /node_modules/,
  22. chunks: 'initial',
  23. name: 'vendor', // 打包后的文件名
  24. priority: 10 // 设置优先级,防止与自定义公共代码提取时被覆盖,不进行打包
  25. }
  26. }
  27. }
  28. }
  29. 复制代码

什么是长缓存?在webpack中如何做到长缓存优化?

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

什么是Tree-shaking?CSS可以Tree-shaking?

Tree-shaking是指在打包中取出那些引入了但在代码中没有被用到的死代码。webpack中通过uglifysPlugin来Tree-shaking JS。CSS需要使用purify-CSS

继承 8种

原型链继承

  • 重点:子的原型对象为new一个父的实例 Child.prototype = new Parent();
  • 缺点:多个实例对引用类型的操作会被篡改

借用构造函数继承

  • 重点:在子构造函数内部调用父构造函数 Parent.call(this)
  • 缺点:无法实现复用,不能继承原型属性/方法

组合继承

  • 重点:使用原型链继承共享的属性和方法,通过借用构造函数继承实例属性

   
   
  1. function Child( name,age){
  2. // 继承属性
  3. Parent. call( this, name)
  4. this. age=age
  5. }
  6. // 继承方法
  7. Child. prototype = new Parent()
  8. Child. prototype. constructor = Child;
  9. 复制代码
  • 缺点:无论在什么情况都会调用两次父构造函数,一次是创建子类型原型,另一次是在子构造函数内部

原型式继承

  • 重点:执行对给定对象的浅复制

   
   
  1. function object(obj){
  2. function F(){}
  3. F.prototype= obj
  4. return new F();
  5. }
  6. var person1= object(person);
  7. 复制代码

在ES5中Object.create()可替换上面的方法object() var person1 = Object.create(person);

  • 缺点:原型链继承多个实例的引用类型属性指向相同,存在篡改的可能;无法传递参数

寄生式继承

  • 重点:在原型式继承的基础上,增强对象,返回构造函数

   
   
  1. function createAnother(obj){
  2. var clone= object(obj);
  3. // ES5中用这个
  4. // var clone=Object.create(obj);
  5. // 增强对象
  6. clone.sayHi= function(){};
  7. return clone;
  8. }
  9. var person1=createAnother(person)
  10. 复制代码
  • 缺点:同原型式继承

寄生组合式继承

  • 重点:结合构造函数传递参数和寄生模式实现继承

   
   
  1. // 借用构造函数增强子类实例属性(支持传参和避免篡改)
  2. function Child( name,age){
  3. // 继承属性
  4. Parent. call( this, name)
  5. this. age=age
  6. }
  7. function inheritPrototype( Child, Parent){
  8. var prototype= Object. create( Parent. prototype);
  9. prototype. constructor= Child;
  10. Child. prototype=prototype;
  11. }
  12. // 将父类原型指向子类,这样子类就能使用父类原型链的属性/方法
  13. inheritPrototype( Child, Parent);
  14. 复制代码

优点:只调用一次构造函数,原型链不变,是最成熟的

混入方式继承多个方式

重点:利用Object.assign将父类原型上的方法拷贝到子类原型上,这样子类实例实例就可以使用父类的方法


   
   
  1. Object. assign( Child. prototype, Parent. prototype);
  2. Child. prototype. constructor= Child;
  3. 复制代码

ES6类 extends

重点:使用extends表明继承自哪个父类,并且在子类构造函数中必须使用super,可以看做是Parent.call(this,value)


   
   
  1. class Parent{
  2. constructor(value){
  3. this. val=value
  4. }
  5. }
  6. class Child extends Parent{
  7. constructor(value){
  8. super(value)
  9. this. val = value
  10. }
  11. }
  12. 复制代码

参考文献:

关注下面的标签,发现更多相似文章

## webpack面试题
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值