【面试题】你需要知道的webpack高频面试题_webpack专场——大厂高频面试题】

2401_84446513

已于 2024-05-01 05:04:31 修改

阅读量309

点赞数 9

分类专栏：程序员文章标签： webpack 前端 node.js

于 2024-05-01 05:04:29 首次发布

本文链接：https://blog.csdn.net/2401_84446513/article/details/138363717

版权

程序员专栏收录该内容

162 篇文章 0 订阅

订阅专栏

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

// url-loader增强版的file-loader，小于limit的转为Base64,大于limit的调用file-loader
npm install url-loader -D
// 使用module.exports = {
    module: {
        rules: [{
            test: /\.(png|jpg|gif)$/,
            use: [{
                loader: 'url-loader',
                options: {
                    outputPath: 'images/',
                    limit: 500//小于500B的文件打包出Base64格式，写入JS
                }
            }]
        }]
    }
}
复制代码

plugins

html-webpack-plugin: 压缩html

const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
  //...
  plugins: [
    newHtmlWebpackPlugin({
      filename: 'index.html', // 配置输出文件名和路径template: './public/index.html', // 配置要被编译的html文件
      hash: true,
      // 压缩 => production 模式使用
      minify: {
        removeAttributeQuotes: true, //删除双引号
        collapseWhitespace: true//折叠 html 为一行
      }
    })
  ]
}
复制代码

clean-webpack-plugin: 打包器清理源目录文件，在webpack打包器清理dist目录

npm install clean-webpack-plugin -D
// 修改webpack.config.jsconst cleanWebpackPlugin=require('clean-webpack-plugin')
module.exports = {
    plugins: [newcleanWebpackPlugin(['dist'])]
}
复制代码

参考

大厂面试题分享面试题库

前后端面试题库（面试必备）推荐：★★★★★

地址：前端面试题库

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

{
    "presets": ['@babel/preset-env']
}
复制代码

配置webpack.config.js

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    module: {
        rules: [{
            test: /\.js$/,
            exclude: /node_modules/,
            use: {loader: 'babel-loader'}
        }]
    }
}
复制代码

提取公用代码

module.exports = {
    optimization: {
        splitChunks: {
            common: {
                // 抽离公共代码chunks: 'initial',
                name: 'common', // 打包后的文件名minChunks: 2, // 最小引用2次minSize: 0// 超出0字节就生成一个新包
            },
            styles: {
                // 抽离公用代码name: 'styles',
                test: /\.css$/,
                chunks: 'all',
                minChunks: 2,
                enforce: true
            },
            vender: {
                // 抽离第三方插件test: /node_modules/,
                chunks: 'initial',
                name: 'vendor', // 打包后的文件名priority: 10// 设置优先级，防止与自定义公共代码提取时被覆盖，不进行打包
            }
        }
    }
}
复制代码

什么是长缓存？在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)
缺点：无法实现复用，不能继承原型属性/方法

组合继承

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

functionChild(name,age){
    // 继承属性Parent.call(this, name)
    this.age=age
}
// 继承方法Child.prototype = newParent()
Child.prototype.constructor = Child;
复制代码

缺点：无论在什么情况都会调用两次父构造函数，一次是创建子类型原型，另一次是在子构造函数内部

原型式继承

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

function object(obj){
    function F(){}
    F.prototype=obj    returnnewF();
}
var person1=object(person);
复制代码

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

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

寄生式继承

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

functioncreateAnother(obj){
    var clone=object(obj);
    // ES5中用这个// var clone=Object.create(obj);// 增强对象
    clone.sayHi=function(){};
    return clone;
}
var person1=createAnother(person)
复制代码

缺点：同原型式继承

寄生组合式继承

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

// 借用构造函数增强子类实例属性（支持传参和避免篡改）functionChild(name,age){
    // 继承属性Parent.call(this, name)
    this.age=age
}
functioninheritPrototype(Child, Parent){
    var prototype=Object.create(Parent.prototype);
    prototype.constructor=Child;
    Child.prototype=prototype;
}
// 将父类原型指向子类，这样子类就能使用父类原型链的属性/方法inheritPrototype(Child, Parent);
复制代码

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

混入方式继承多个方式

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

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

ES6类 extends

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

classParent{
    constructor(value){
        this.val=value
    }
}
classChildextendsParent{
    constructor(value){
        super(value)
        this.val = value
    }


### JavaScript

* js的基本类型有哪些？引用类型有哪些？null和undefined的区别。

* 如何判断一个变量是Array类型？如何判断一个变量是Number类型？（都不止一种）

* Object是引用类型嘛？引用类型和基本类型有什么区别？哪个是存在堆哪一个是存在栈上面的？

* JS常见的dom操作api

* 解释一下事件冒泡和事件捕获

* 事件委托（手写例子），事件冒泡和捕获，如何阻止冒泡？如何组织默认事件？

* 对闭包的理解？什么时候构成闭包？闭包的实现方法？闭包的优缺点？

* this有哪些使用场景？跟C,Java中的this有什么区别？如何改变this的值？

* call，apply，bind

* 显示原型和隐式原型，手绘原型链，原型链是什么？为什么要有原型链

* 创建对象的多种方式

* 实现继承的多种方式和优缺点

* new 一个对象具体做了什么

* 手写Ajax，XMLHttpRequest

* 变量提升

* 举例说明一个匿名函数的典型用例

* 指出JS的宿主对象和原生对象的区别，为什么扩展JS内置对象不是好的做法？有哪些内置对象和内置函数？

* attribute和property的区别

* document load和document DOMContentLoaded两个事件的区别

* JS代码调试  

* **[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

  ![](https://img-blog.csdnimg.cn/img_convert/a69e7b92af546ecaedf148f129bfef2b.png)