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

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

前端工程相关模块精选篇

[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优化
优化构建速度
优化产出代码

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

前端工程相关模块精选篇

1. webpack的基本配置

2. webpack高级配置

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

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

5. webpack原理简述

6. webpack热更新原理

7. webpack Loader

8. webpack Plugin

9. webpack编译优化

10. webpack import()原理

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原理是什么

22. Vite了解吗

23. 面试真题

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