2024 高级前端面试题之 前端工程相关 「精选篇」

八了个戒2024-02-01 14:34

该内容主要整理关于 前端工程相关模块的相关面试题，其他内容面试题请移步至 「最新最全的前端面试题集锦」 查看。

前端工程相关模块精选篇

  • [1. webpack的基本配置](#1. webpack的基本配置)
  • [2. webpack高级配置](#2. webpack高级配置)
  • [3. webpack性能优化-构建速度](#3. webpack性能优化-构建速度)
  • [4. webpack性能优化-产出代码（线上运行）](#4. webpack性能优化-产出代码（线上运行）)
  • [5. webpack原理简述](#5. webpack原理简述)
  • [6. webpack热更新原理](#6. webpack热更新原理)
  • [7. webpack Loader](#7. webpack Loader)
  • [8. webpack Plugin](#8. webpack Plugin)
  • [9. webpack编译优化](#9. webpack编译优化)
  • [10. webpack import()原理](#10. webpack import()原理)
  • [11. webpack有哪几种文件指纹？](#11. webpack有哪几种文件指纹？)
  • [12. webpack中如何处理图片的？](#12. webpack中如何处理图片的？)
  • [13. webpack常用插件总结](#13. webpack常用插件总结)
  • [14. 抽象语法树AST](#14. 抽象语法树AST)
  • [15. Babel环境搭建和基本配置](#15. Babel环境搭建和基本配置)
  • [16. 使用babel-loader会有哪些问题？可以怎样优化？](#16. 使用babel-loader会有哪些问题？可以怎样优化？)
  • [17. Babel 原理](#17. Babel 原理)
  • [18. Babel是如何编译Class的？](#18. Babel是如何编译Class的？)
  • [19. Babel Polyfill是什么](#19. Babel Polyfill是什么)
  • [20. Babel Runtime](#20. Babel Runtime)
  • [21. Tree Shaking原理是什么](#21. Tree Shaking原理是什么)
  • [22. Vite了解吗](#22. Vite了解吗)
  • [23. 面试真题](#23. 面试真题)

1. webpack的基本配置

基于 webpack4

javascript 复制代码 
// webpack.common.js
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { srcPath, distPath } = require('./paths')

module.exports = {
    entry: path.join(srcPath, 'index'),
    module: {
        rules: [
            {
                test: /\.js$/,
                loader: ['babel-loader'],
                include: srcPath,
                exclude: /node_modules/
            },
            // {
            //     test: /\.vue$/,
            //     loader: ['vue-loader'],
            //     include: srcPath
            // },
            // {
            //     test: /\.css$/,
            //     // loader 的执行顺序是：从后往前（知识点）
            //     loader: ['style-loader', 'css-loader']
            // },
            {
                test: /\.css$/,
                // loader 的执行顺序是：从后往前
                loader: ['style-loader', 'css-loader', 'postcss-loader'] // 加了 postcss
            },
            {
                test: /\.less$/,
                // 增加 'less-loader' ，注意顺序
                loader: ['style-loader', 'css-loader', 'less-loader']
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: path.join(srcPath, 'index.html'),
            filename: 'index.html'
        })
    ]
}
javascript 复制代码 
// paths.js
/**
 * @description 常用文件夹路径
 */

const path = require('path')

const srcPath = path.join(__dirname, '..', 'src')
const distPath = path.join(__dirname, '..', 'dist')

module.exports = {
    srcPath,
    distPath
}
javascript 复制代码 
// webpack.dev.js

const path = require('path')
const webpack = require('webpack')
const webpackCommonConf = require('./webpack.common.js')
const { smart } = require('webpack-merge')
const { srcPath, distPath } = require('./paths')

module.exports = smart(webpackCommonConf, {
    mode: 'development',
    module: {
        rules: [
            // 直接引入图片 url
            {
                test: /\.(png|jpg|jpeg|gif)$/,
                use: 'file-loader'
            }
        ]
    },
    plugins: [
        new webpack.DefinePlugin({
            // window.ENV = 'development'
            ENV: JSON.stringify('development')
        })
    ],
    devServer: {
        port: 8080,
        progress: true,  // 显示打包的进度条
        contentBase: distPath,  // 根目录
        open: true,  // 自动打开浏览器
        compress: true,  // 启动 gzip 压缩

        // 设置代理
        proxy: {
            // 将本地 /api/xxx 代理到 localhost:3000/api/xxx
            '/api': 'http://localhost:3000',

            // 将本地 /api2/xxx 代理到 localhost:3000/xxx
            '/api2': {
                target: 'http://localhost:3000',
                pathRewrite: {
                    '/api2': ''
                }
            }
        }
    }
})
javascript 复制代码 
// webpack.prod.js

const path = require('path')
const webpack = require('webpack')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const webpackCommonConf = require('./webpack.common.js')
const { smart } = require('webpack-merge')
const { srcPath, distPath } = require('./paths')

module.exports = smart(webpackCommonConf, {
    mode: 'production',
    output: {
        filename: 'bundle.[contentHash:8].js',  // 打包代码时，加上 hash 戳
        path: distPath,
        // publicPath: 'http://cdn.abc.com'  // 修改所有静态文件 url 的前缀（如 cdn 域名），这里暂时用不到
    },
    module: {
        rules: [
            // 图片 - 考虑 base64 编码的情况
            {
                test: /\.(png|jpg|jpeg|gif)$/,
                use: {
                    loader: 'url-loader',
                    options: {
                        // 小于 5kb 的图片用 base64 格式产出
                        // 否则，依然延用 file-loader 的形式，产出 url 格式
                        limit: 5 * 1024,

                        // 打包到 img 目录下
                        outputPath: '/img1/',

                        // 设置图片的 cdn 地址（也可以统一在外面的 output 中设置，那将作用于所有静态资源）
                        // publicPath: 'http://cdn.abc.com'
                    }
                }
            },
        ]
    },
    plugins: [
        new CleanWebpackPlugin(), // 会默认清空 output.path 文件夹
        new webpack.DefinePlugin({
            // window.ENV = 'production'
            ENV: JSON.stringify('production')
        })
    ]
})

2. webpack高级配置

  • 配置多入口打包
  • 抽离CSS文件
  • 抽离公共代码splitChunks，避免多次打包

3. webpack性能优化-构建速度

  • 优化babel-loader
  • IgnorePlugin
  • noParse
  • happyPack
  • parallelUglifyPlugin
  • 自动刷新
  • 热更新
  • 优化打包速度完整代码
  • DllPlugin 动态链接库

4. webpack性能优化-产出代码（线上运行）

5. webpack原理简述

  • 1.1 核心概念
  • 1.2 工作流程 (加载 - 编译 - 输出)
  • 1.3 模块包装
  • 1.4 webpack的打包原理
  • 1.5 webpack的打包原理详细
  • 1.6 总结

6. webpack热更新原理

7. webpack Loader

8. webpack Plugin

  • 实现一个编译结束退出命令的插件

9. webpack编译优化

  • 优化webpack打包速度

10. webpack import()原理

  • 动态导入原理
  • webpack中如何实现动态导入？

11. webpack有哪几种文件指纹？

12. webpack中如何处理图片的？

13. webpack常用插件总结

14. 抽象语法树AST

15. Babel环境搭建和基本配置

16. 使用babel-loader会有哪些问题？可以怎样优化？

17. Babel 原理

18. Babel是如何编译Class的？

19. Babel Polyfill是什么

20. Babel Runtime

21. Tree Shaking原理是什么

  • 对tree-shaking的了解
  • 原理

22. Vite了解吗

  • Vite 特点
  • Vite 为什么启动非常快
  • 手写实现

23. 面试真题

  • 前端为何打包和构建
  • module chunk bundle区别
  • loader和plugin区别
  • babel和webpack的区别
  • babel-polyfill和babel-runtime的区别
  • webpack如何实现懒加载
  • 为何proxy不能被polyfill
  • webpack优化
  • 优化构建速度
  • 优化产出代码
相关推荐
怕浪猫7 小时前
GEO 优化到底是什么？AI时代内容创作者必须懂的新技能
算法·面试·github
沙漠之主10 小时前
C++编程教学设计资料：从入门到实战的完整课程方案
java·前端·c++
hasty10 小时前
不上传新包，也能改变用户拿到的版本：npm dist-tag 的 OIDC 权限治理
前端·npm·node.js
Csvn11 小时前
diff 算法（虚拟 DOM Reconciliation）
前端
前端snow12 小时前
ai agent --- 文件存储
前端
Frag0ut12 小时前
Chrome四大版本获取及共存指南：Stable/Beta/Dev/Canary
前端·chrome·浏览器·dev·beta·canary·共存版
IT大白鼠13 小时前
搜索系列 · 第 08 篇——面试收官：高频题与全景总结
elasticsearch·面试·nosql
IT_陈寒13 小时前
SpringBoot自动配置坑了我一把，原来是这样绕过去的
前端·人工智能·后端
广州华水科技13 小时前
单北斗GNSS变形监测在大坝安全监测中的应用与优势
前端
zeng不错14 小时前
B站 173 个投稿活动看到眼瞎？我写了个扩展，主打一个精准打击
前端
热门推荐
01如何新建文件夹？ 电脑新建文件夹的4种方法02国内可直接用、免费额度/永久免费的大模型API清单（含 SiliconFlow、火山、阿里、智谱、百度、Kimi、DeepSeek、DMXAPI 等）03历年考研数学一、数学二、数学三真题试卷及答案PDF04Telegram APK 下载安装完整指南 — 2026年最新05GitHub 镜像站点06蜘蛛磁力 搜索引擎大全，如何使用蜘蛛磁力查找磁力链接07Windows 10/11 如何退出微软账户并改用本地账户登录（含找不到选项的解决方法）082026 爱知・名古屋亚运会怎么看？直播平台+赛程安排分享09微信历史版本含下载地址（ Windows PC | 安卓 | MAC ）及设置微信不更新10给AI一张“业务概念地图“：本体如何从哲学走向企业智能