Webpack 启动时会根据命令行参数或脚本加载配置文件，默认是 webpack.config.js ，也可以指定其他配置文件。配置文件中包含了入口（entry）、输出（output）、加载器（loaders）、插件（plugins）、模式（mode：development/production）、解析规则（resolve）、性能配置（performance）等。
Webpack 会将这些配置参数传递给 WebpackOptionsDefaulter ，生成最终的配置对象。

初始化 Compiler 对象

Webpack 创建一个 Compiler 对象，它是 Webpack 工作的核心对象，负责管理整个打包过程中的所有状态、处理逻辑。
Compiler 对象会从配置文件中读取配置，初始化各种内部插件和钩子（Hooks），并为后续的构建过程做准备。

挂载插件

Webpack 配置中的插件会被逐一执行并挂载到 Compiler 对象的钩子上。插件可以在 Webpack 的生命周期中的不同阶段执行自定义逻辑，比如在打包前清理目录、在打包后生成 HTML 文件等。

解析入口文件：

确定入口

Webpack 根据配置中的 entry 属性确定构建的入口文件，可以是单一文件，也可以是多入口配置。
entry 可以是字符串、数组或对象，不同的形式会影响后续生成的 Chunk 数量。

递归解析依赖

从入口文件开始，Webpack 使用内部的 Webpack Resolver 递归解析模块的依赖关系。
Webpack 会根据文件的类型和文件后缀名，选择不同的处理方式。它使用 fs 模块来读取文件内容，并通过 AST （抽象语法树）解析出文件中 import 、 require 、 import() 等依赖声明，确定依赖模块的路径。
对于解析到的每个依赖模块，Webpack 会继续递归处理，直至所有依赖模块都被解析为止。

模块编译

识别文件类型

Webpack 默认只识别 JavaScript 和 JSON 文件，对于其他类型的文件，如 TypeScript、SCSS、图片等，必须通过相应的 Loader 进行预处理。
在解析到一个模块时，Webpack 根据配置中的 module.rules 来匹配合适的 Loader ，从而决定该模块如何被处理。

使用 Loader 处理模块

每个匹配到的 Loader 会按照配置顺序对模块内容进行转换。例如， babel-loader 会将 ES6+ 代码转换为 ES5， css-loader 解析 CSS 文件， file-loader 处理文件资源等。
Loader 的执行是有顺序的，通常是“从右到左”或“从下到上”的顺序执行（如果在配置中使用了数组表示多个 Loader）。

转换为 Webpack 能识别的模块

Loader 转换后的文件内容被 Webpack 视为标准的 JavaScript 模块，进一步通过内部模块机制（如 CommonJS、ESM）进行处理。

生成 Chunk

确定 Chunk

Webpack 会根据入口文件及其所有依赖文件生成一个或多个 Chunk 。
每个 Chunk 是一组相关联模块的集合。默认情况下，每个入口文件会生成一个对应的 Chunk 。

代码分割（Code Splitting）

在生成 Chunk 的过程中，Webpack 可以根据配置（如 SplitChunksPlugin ）将某些公共模块抽取到一个单独的 Chunk 中，以便在多个入口间共享，从而优化加载性能。

优化阶段

模块去重和合并

Webpack 会分析模块之间的依赖关系，消除模块中的冗余代码，将重复引用的模块进行合并。

压缩代码

在生产环境模式下，Webpack 会使用内置的 TerserPlugin 来压缩 JavaScript 代码，去除注释、空白、未引用的代码等。
对于 CSS 文件，也可以使用 css-minimizer-webpack-plugin 进行压缩。

Tree Shaking

Webpack 会自动移除未使用的模块和代码，通过静态分析 import 和 export ，保留实际使用的部分。这在使用 ES6 模块时非常有效。

生成输出文件

输出文件配置

Webpack 根据配置中的 output 选项决定生成文件的名称和路径。常用的占位符包括 [name] （入口名称）、 [hash] （模块内容的 hash 值）、 [chunkhash] （Chunk 的 hash 值）等。
如果有多个 Chunk 或者使用了代码分割，Webpack 会生成多个文件。

写入文件系统

Webpack 最终将所有的 Chunk 转换为文件，并将它们写入到文件系统中的指定目录中（通常是 dist 目录）。
输出的文件包括 JavaScript、CSS、HTML（如果使用了相应插件）以及其他资源文件。

结束构建

触发完成钩子

Webpack 在完成打包后，会触发 done 钩子，允许插件或自定义代码在构建完成后执行操作。
例如， HtmlWebpackPlugin 会在构建完成后生成对应的 HTML 文件， CleanWebpackPlugin 会在构建开始前清理输出目录。

打印打包结果

Webpack 会在终端中输出构建信息，包括打包时间、生成文件的大小、模块数量、依赖关系图等。

热更新（HMR，Hot Module Replacement，可选）

监听文件变化

在开发模式下，Webpack 可以通过 webpack-dev-server 或 webpack-dev-middleware 监听源文件的变化。当文件内容发生改变时，Webpack 会触发重新构建。

局部更新模块

通过 HMR，Webpack 能够将更新后的模块发送到浏览器，并替换页面上对应的旧模块，而无需刷新整个页面。这样可以加快开发效率和调试体验。

更新状态和重新编译

在 HMR 过程中，Webpack 会保存当前模块的状态，并在重新编译后，将新代码应用到现有的模块实例上，实现无缝更新。

【中高级】面试官：简单介绍一下工作中常用的 loader 与 plugin，有实现过自定义 loader、plugin 吗？

Webpack5 基础配置

上面提到 Webpack 常见配置包含

mode: 'development'
entry: './src/index.js'
output
module.rules
Loader
Plugin
devServer

完整配置示例

以下是结合基础配置与 loader、plugin，以及自定义 plugin、loader 完整示例

// webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const MiaomaPlugin = require('./MiaomaPlugin'); // 自定义插件

module.exports = {
    mode: 'development', // or 'production'
    entry: './src/index.js', // 入口文件
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            },
            {
                test: /\.css$/,
                use: [MiniCssExtractPlugin.loader, 'css-loader']
            },
            {
                test: /\.scss$/,
                use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
            },
            {
                test: /\.(png|jpg|gif)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 8192, // 8KB 以下的图片转为 base64，以上的则拷贝文件
                            name: 'images/[name].[hash:8].[ext]'
                        }
                    }
                ]
            },
            {
                test: /\.txt$/,
                use: [
                    {
                        loader: path.resolve(__dirname, 'miaoma-loader.js') // 自定义 loader
                    }
                ]
            }
        ]
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            template: './src/index.html',
            filename: 'index.html'
        }),
        new MiniCssExtractPlugin({
            filename: '[name].[contenthash].css'
        }),
        new MiaomaPlugin() // 使用自定义插件
    ],
    devServer: {
        contentBase: './dist',
        compress: true,
        port: 9000
    }
};

配置详解

mode: 'development' :
- 设置 Webpack 运行模式，可以是 development （开发模式）或 production （生产模式）。开发模式下代码不压缩，生产模式下会启用优化。
entry: './src/index.js' :
- 配置 Webpack 的入口文件，打包从此文件开始。
output :
- 配置打包后的文件输出位置和名称。 path.resolve 用于获取绝对路径， filename 用于设置输出的文件名。
module.rules :
- 配置各类文件的处理规则。 test 属性用于匹配文件类型， use 属性指定使用的 Loader。
Loader 使用 :
- babel-loader 处理 JavaScript 文件，将 ES6+ 代码转换为 ES5。
- css-loader 和 sass-loader 处理 CSS 和 SCSS 文件， MiniCssExtractPlugin.loader 将 CSS 提取为单独文件。
- url-loader 处理图片文件，8KB 以下的图片转为 base64，大于 8KB 的图片则拷贝到输出目录。
- 自定义 miaoma-loader.js 用于处理 .txt 文件内容，将 'foo' 替换为 'bar'。
Plugin 使用 :
- CleanWebpackPlugin 在每次打包前清理 dist 目录。
- HtmlWebpackPlugin 根据模板生成 HTML 文件，并自动注入打包后的 JS 文件。
- MiniCssExtractPlugin 将 CSS 提取到单独的文件中。
- 自定义 MiaomaPlugin 在编译完成后输出提示信息。
devServer :
- 配置开发服务器，指定内容目录、是否启用 gzip 压缩以及端口号。

Loader 和 Plugin 介绍

在 Webpack 中， Loader 和 Plugin 是两个非常重要的概念：

Loader 是用于转换模块的工具。例如，将 TypeScript 转换为 JavaScript，将 SCSS 转换为 CSS，或者将图片文件处理为可以导入的模块。Loader 主要用于文件内容的转换。
Plugin 是用于扩展 Webpack 功能的工具。它们可以在 Webpack 构建过程中执行更复杂的任务，如打包优化、资源管理、环境变量注入等。Plugin 主要用于处理构建过程中的各种任务。

常用的 Loader 和 Plugin

常用 Loader:

babel-loader : 将 ES6+ 语法转换为兼容性更好的 ES5 语法，通常与 @babel/preset-env 一起使用。
css-loader : 解析 CSS 文件中的 @import 和 url() ，并将其转换为 JavaScript 可以处理的模块。
style-loader : 将 CSS 插入到 DOM 中的 <style> 标签中。
file-loader : 处理文件（如图片、字体），并返回文件的 URL。
url-loader : 类似于 file-loader ，但当文件小于某个限制时，可以将文件内容转化为 Data URL。
sass-loader : 将 SCSS/SASS 文件编译为 CSS。

常用 Plugin:

HtmlWebpackPlugin : 自动生成 HTML 文件，并自动注入打包后的资源（如 JS、CSS 文件）。
CleanWebpackPlugin : 在每次打包前清理输出目录，防止旧文件残留。
MiniCssExtractPlugin : 将 CSS 提取到单独的文件中，而不是内嵌在 JavaScript 中。
DefinePlugin : 创建全局常量，在编译时进行替换。
TerserPlugin : 用于压缩 JavaScript 代码，主要在生产环境中使用。

自定义 Loader 与 Plugin

自定义 Loader:

Loader 实质上是一个函数，它接收源文件内容作为输入，并输出处理后的内容。可以通过 this.callback 返回结果。

示例：自定义一个 Loader，将文件内容中的 'miaoma' 替换为 '妙码学院'：

// miaoma-loader.js
module.exports = function (source) {
    // 替换 'miaoma' 为 '妙码学院'
    const result = source.replace(/miaoma/g, '妙码学院');
    // 返回处理后的内容
    return result;
};

自定义 Plugin:

Plugin 是一个类（ES6+），它包含 apply 方法。 apply 方法接收一个 compiler 对象，通过这个对象你可以钩入 Webpack 的各个构建阶段。

示例：自定义一个 Plugin，编译完成后输出提示：

// MiaomaPlugin.js
class MiaomaPlugin {
    apply(compiler) {
        compiler.hooks.done.tap('MiaomaPlugin', (stats) => {
            console.log('编译完成！');
        });
    }
}

module.exports = MiaomaPlugin;

【专家级】面试官：假如让你从零到一设计 Webpack，说说你的架构设计思路

设计一个类似 Webpack 的打包工具是一项复杂的任务，需要综合考虑模块解析、打包优化、插件化系统以及开发环境支持等多个方面。以下是一个从零到一设计 Webpack 的架构思路，逐步阐述各个组件的实现方法。

整体思路分析

之前我们介绍了 Vite 打包，使用 Vite bundleless 方案可以省略很大一部分构建编译相关的处理，但实现一个打包构建工具，基本思路还是相同的，一般包含：

基本协议约定
构建编译器实例与构建物实例
参数解析处理
依赖图构建
模块编译
分 chunk 处理
优化输出
输出产物

核心实现

Webpack 核心函数定义

首先，我们定义一个 Webpack 类来处理整个打包流程。这个类将管理从配置读取、依赖解析、模块编译到最终输出的所有步骤。

class Webpack {
    constructor(options) {
        this.options = options; // 保存配置
        this.modules = []; // 存储解析后的模块信息
        this.plugins = []; // 存储插件
        this.hooks = new HookSystem(); // 插件化系统
    }

    run() {
        // 1. 解析配置
        this.hooks.call('beforeRun', this);
        const entryModule = this.buildModule(this.options.entry);

        // 2. 模块依赖解析
        this.hooks.call('beforeCompile', this);
        this.modules.push(entryModule);
        this.modules = this.modules.flatMap(module => this.resolveDependencies(module));

        // 3. 代码优化
        this.hooks.call('optimizeModules', this.modules);

        // 4. 输出文件
        this.hooks.call('emit', this);
        this.emitFiles();
        this.hooks.call('done', this);
    }

    buildModule(entryPath) {
        // 模拟模块编译
        const module = {
            id: entryPath,
            dependencies: this.parseDependencies(entryPath)
        };
        return module;
    }

    resolveDependencies(module) {
        // 递归解析模块依赖
        return module.dependencies.map(dep => this.buildModule(dep));
    }

    parseDependencies(modulePath) {
        // 简单的依赖解析逻辑
        // 实际上需要用AST等方式解析依赖关系
        return []; // 返回依赖模块的路径数组
    }

    emitFiles() {
        // 输出打包后的文件
        console.log('Emitting files...');
    }
}

命令行工具接入

要让 Webpack 可以通过命令行工具使用，可以为其添加一个 CLI 接口。我们可以使用 Node.js 的 commander 模块来处理命令行参数。

#!/usr/bin/env node
const { program } = require('commander');
const path = require('path');
const Webpack = require('./webpack');

program
    .version('1.0.0')
    .option('-c, --config <path>', 'set config path', 'webpack.config.js')
    .parse(process.argv);

const options = require(path.resolve(process.cwd(), program.config));
const webpack = new Webpack(options);
webpack.run();

这个 CLI 工具允许用户通过命令行指定配置文件，并运行 Webpack。

开发环境服务

开发环境中的实时编译和热更新功能是非常重要的。可以通过一个简单的开发服务器来实现，这个服务器监听文件变化并自动重新编译。

const express = require('express');
const http = require('http');
const WebSocket = require('ws');
const chokidar = require('chokidar');
const Webpack = require('./webpack');

class DevServer {
    constructor(options) {
        this.options = options;
        this.app = express();
        this.server = http.createServer(this.app);
        this.wss = new WebSocket.Server({ server: this.server });

        this.compiler = new Webpack(options);
        this.setupMiddleware();
        this.setupFileWatcher();
    }

    setupMiddleware() {
        this.app.use((req, res, next) => {
            res.send('Your application goes here');
        });
    }

    setupFileWatcher() {
        const watcher = chokidar.watch(this.options.watch || './src');
        watcher.on('change', () => {
            console.log('Files changed, recompiling...');
            this.compiler.run();
            this.broadcast('recompiled');
        });
    }

    broadcast(message) {
        this.wss.clients.forEach(client => {
            if (client.readyState === WebSocket.OPEN) {
                client.send(message);
            }
        });
    }

    listen(port = 8080) {
        this.server.listen(port, () => {
            console.log(`DevServer running at http://localhost:${port}`);
        });
    }
}

// 启动开发服务器
const options = require('./webpack.config.js');
const server = new DevServer(options);
server.listen();

这个开发服务器会监听项目文件的变化，当文件变化时会触发重新编译，并通过 WebSocket 通知客户端更新。

从参数解析到模块加载解析再到优化输出

接下来，我们详细说明从参数解析到模块加载、解析、优化和输出的全过程。

参数解析： 从配置文件或命令行参数获取 Webpack 的配置，初始化 Webpack 类的实例。
模块加载与解析：
- buildModule(entryPath) 方法负责从入口开始解析模块，将其转换为 Webpack 能理解的模块格式。
- resolveDependencies(module) 递归解析每个模块的依赖，确保所有依赖模块都被加载。
优化阶段： 在 run 方法中，通过调用 optimizeModules 钩子，进行代码优化。这个优化过程可以包括去重、压缩、代码拆分等操作。
输出阶段： 使用 emitFiles 方法将打包后的结果写入文件系统。此阶段可以使用各种插件来控制输出内容的格式和组织方式。

`tapable` 实现插件化系统【自定义 plugin 原理根基】

定义钩子 (Hooks)

使用 tapable 库中的钩子类型来定义 Webpack 生命周期中的各个阶段。

const { SyncHook, AsyncSeriesHook, AsyncParallelHook } = require('tapable');

class Webpack {
    constructor(options) {
        this.options = options;
        this.hooks = {
            initialize: new SyncHook(),
            beforeCompile: new SyncHook(),
            compile: new SyncHook(['compilation']),
            afterCompile: new SyncHook(),
            emit: new AsyncSeriesHook(['compilation']),
            done: new AsyncParallelHook(['stats']),
        };

        this.initPlugins();
    }

    initPlugins() {
        const plugins = this.options.plugins || [];
        plugins.forEach(plugin => plugin.apply(this));
    }

    run() {
        // 1. 初始化阶段
        this.hooks.initialize.call();

        // 2. 开始编译
        this.hooks.beforeCompile.call();
        const compilation = {}; // 模拟一个 compilation 对象
        this.hooks.compile.call(compilation);

        // 3. 编译结束
        this.hooks.afterCompile.call();

        // 4. 触发 emit 钩子（异步串行）
        this.hooks.emit.callAsync(compilation, err => {
            if (err) {
                console.error('Emit phase failed:', err);
            }

            // 5. 编译完成
            const stats = {}; // 模拟构建统计信息
            this.hooks.done.callAsync(stats, () => {
                console.log('Build process is done.');
            });
        });
    }
}

插件接入机制

插件是一个类，通过 apply 方法将自己注册到 Webpack 的生命周期钩子上。

示例插件：

class ExamplePlugin {
    apply(compiler) {
        compiler.hooks.initialize.tap('ExamplePlugin', () => {
            console.log('ExamplePlugin: Webpack 初始化');
        });

        compiler.hooks.beforeCompile.tap('ExamplePlugin', () => {
            console.log('ExamplePlugin: 编译前阶段');
        });

        compiler.hooks.emit.tapAsync('ExamplePlugin', (compilation, callback) => {
            console.log('ExamplePlugin: Emit 阶段');
            // 模拟异步操作
            setTimeout(() => {
                console.log('ExamplePlugin: Emit 阶段异步操作完成');
                callback();
            }, 1000);
        });

        compiler.hooks.done.tapAsync('ExamplePlugin', (stats, callback) => {
            console.log('ExamplePlugin: 编译完成');
            callback();
        });
    }
}

module.exports = ExamplePlugin;

使用插件：

在 Webpack 配置文件中，加载并使用这个插件。

const ExamplePlugin = require('./ExamplePlugin');

module.exports = {
    entry: './src/index.js',
    plugins: [
        new ExamplePlugin(),
    ]
};

钩子类型的详细解释

SyncHook : 同步执行钩子，所有注册的插件同步执行。
- 示例： initialize , beforeCompile
AsyncSeriesHook : 异步串行执行钩子，所有插件按顺序执行，前一个插件完成后下一个才会执行。
- 示例： emit
AsyncParallelHook : 异步并行执行钩子，所有插件同时执行，等所有插件完成后再继续下一个流程。
- 示例： done

通过这种设计方式，可以从零到一构建一个具备插件化系统的打包工具，类似于 Webpack 5 的插件系统。开发者可以轻松扩展工具的功能，满足不同项目的需求。

妙码学院全网独家项目实战矩阵

所有项目实战，均完全 从零到一手写 ， 纯原创 ，项目架构与编码规范真一线大厂级。

微前端在分拆原子应用场景下的落地与实践
协同编辑器从零到一架构实现
推动团队基建落地
- React UI 库
- Vue Composition API 库
- 企业级脚手架
数字孪生平台整体架构设计
企业级无代码可视化平台实践（Vue3）
低代码平台设计与实现
- 编排引擎
- 流程引擎
- 编辑器
- 代码执行器与 JavaScript 沙箱
用户行为分析 SDK 及监控可视化整体实现
可视化渲染引擎设计与实现
基于 RAG / Agent 前端 AI 应用流程编排平台

简历优化（30K+ 简历样板）

技能描述

熟练掌握 HTML、CSS、JavaScript、Typescript 以及 OOP、FP、 AOP 等设计思想
掌握样式体系构建与落地，对 css 预编译、css in js、module css 以及 utility-first CSS 有深入研究，并从零改良过样式体系以支持 SSR、SSG
熟悉 React、Vue 相关技术栈，熟悉 React、Vue 及相关技术框架的实现原理
掌握构建工具 Webpack、Vite 等，掌握编译工具 Babel，并深入理解其原理，并参与 Rspack 构建
丰富的数据可视化经验，熟悉 Canvas、svg 开发范式，理解 Echarts、Antv 原理，能根据业务需求基于 d3、zrender 开发自定义渲染引擎
丰富的跨端开发经验，熟练使用 Taro、Flutter、React-Native 开发跨端应用，对构建 hybird App 有丰富经验，深入理解跨端开发编译原理
基于 Node.js 开发脚手架、打包构建优化工具及中间件服务
掌握常用设计模式、算法与安全知识，追求开发高质量、高可维护性代码，追求极致产品体验
团队管理经验，并在项目架构设计与性能优化方面具有丰富经验
算法与编程技术
- 精通各种算法题的分类及解决方法，包括排序与查找、数据结构、动态规划、贪心算法、回溯算法、分治算法、图论算法、数学算法等。
- 重点掌握动态规划的基本概念、解题步骤和经典题目。
3D 数字孪生平台开发经验
- 熟练使用 WebGL 和 WebAssembly 技术，开发高效的 3D 渲染引擎。
- 精通正射影像和倾斜摄影技术，具备 Tile 和模型（包括白膜和精模）的处理经验，能够使用 Blender 进行模型制作。
- 熟悉材质、光效和粒子系统的实现与优化。
全面性能优化能力
- 具备打包构建优化经验，熟练使用 Webpack 进行模块打包，掌握 chunk、treeshaking、happypack、cache-loader 等优化技巧，并使用 Webpack Module Federation 进行模块联邦管理。
- 精通资源优化，能够有效进行图片、字体压缩，管理请求队列，并通过 OSS 和 CDN 提升资源加载速度。
- 具有应用性能优化经验，包括数据结构优化和应用模块更新。
- 深入了解缓存机制，熟悉强缓存（Expiration、Cache-Control）、协商缓存（Etag）和策略缓存（Service-Worker）的配置与管理。

项目描述

这个环节至关重要，很多同学不重视，简历随便写一写就开始投递了，结果投出去几百份可能一家公司面试都没有，结果就在怀疑前端行情出问题了

STAR 法则：

遇到了什么问题 question，需求
怎么评估解决方案，方案对比，方案落地 react 状态管理（redux、mobx、jotai、recoil）Vue3 -> Pinia
具体方案落地
结果反思，细节优化思考

大家先看这段描述：

技术栈：Java、Vue2、echarts、WEui、BaiduMap、JavaScript 、HTTP数据库：MySQL管理工具：SVN

责任描述：

1）产品前端研发负责人，主要负责整体样式沟通，样式调配实现；门户、管理平台、移动端、智端、可视化等前端内容实现；

2）实现组织管理、人员管理、党员关系转接、待办通知、绩效考核（复杂功能算法实现）、发展党员（25个流程）、可视化等主体功能，兼容性优化、适配1920*1080屏幕以及响应式布局实现；

3）相关功能开发，包含前后端、数据库；

4）门户框架搭建、门户整体设计、后端接口、门户前端 UI 实现等；

5）微信小程序框架搭建、小程序页面设计及开发、知识图谱技术预演；

6 ）项目经理工作辅助，包含需求沟通、UI设计沟通、交付材料项目经历整理、前端代码质量管理、部分功能设计。

深度优化一下

工作内容和成果

【 架构设计 】参与智慧管理平台整体架构设计、技术选型与方案评审，担任全栈开发，完成相关核心模块
【 企微开发 】对接企业微信生态，基于企微 SDK 完成平台支付、消息推送、机器人等功能开发
【 可视化 】主导完成平台可视化渲染引擎（可视化图表的组件，数据协议）设计与开发，基于 echarts （svgRenderer、canvasRenderer 一千万行数据的表格渲染【不能使用 虚拟滚动 】 canvas table，chunk）封装业务图表库，服务于平台可视化场景
【 地图开发 】使用百度地图 SDK，封装业务地图渲染器（MapRenderer），包含：地图撒点、地区数据下钻等功能
【 小程序与App 】基于 uniapp 实现智慧党建用户端多端开发落地，产物编译为 H5、微信小程序两端应用
【 团队基建 】推进团队业务组件库、图表库与基础库沉淀，完成 10+ 个业务组件沉淀，以此提升了团队协同开发效率
【优化】设计产品响应式系统，基于 media query 设计响应式端点规则，适配不同端应用的展示
【 自研 OA 打通 】...

STAR

【技术栈】

Java、Vue2、ECharts、WEui、BaiduMap、JavaScript、HTTP
数据库 ：MySQL
管理工具 ：SVN

【产品前端研发负责人】

情境 (Situation) ：担任产品前端研发负责人，负责门户、管理平台、移动端、智端、可视化等前端内容的实现。
任务 (Task) ：主要任务是与设计团队沟通，调配和实现整体样式，确保产品界面的一致性和用户体验。
行动 (Action) ：我协调设计与开发团队，定期召开样式沟通会，亲自进行样式的调配与实现，并负责不同平台和设备的前端内容开发。
结果 (Result) ：成功实现了多个平台的前端开发工作，提升了产品的用户体验和一致性，获得了团队和用户的高度评价。

【实现复杂功能及优化】

情境 (Situation) ：项目需要实现复杂功能算法和大规模功能模块，包括组织管理、人员管理、党员关系转接、待办通知、绩效考核、发展党员（25个流程）和可视化功能。
任务 (Task) ：负责上述复杂功能的实现，并优化其兼容性和响应式布局。
行动 (Action) ：通过设计和实现复杂算法，确保各模块的功能性；进行兼容性优化，使系统适配1920*1080屏幕和响应式布局。
结果 (Result) ：成功实现并优化了所有复杂功能，系统在不同设备和分辨率下均表现良好，提高了用户操作的流畅度和满意度。

【全面功能开发】

情境 (Situation) ：需要进行前后端和数据库的全面开发，确保系统各功能模块的无缝集成。
任务 (Task) ：开发和实现相关功能，包括前端UI、后端接口和数据库交互。
行动 (Action) ：采用Java、Vue2等技术，开发并调试各功能模块，与后端团队密切合作，确保接口的准确性和数据的一致性。
结果 (Result) ：成功完成了所有功能模块的开发和集成，系统运行稳定，性能优异，受到了客户的好评。

【微信小程序开发与知识图谱预演】

情境 (Situation) ：项目需要开发微信小程序，并进行知识图谱技术的预演。
任务 (Task) ：负责小程序框架的搭建、页面设计及开发，同时进行知识图谱的技术预演。
行动 (Action) ：使用WEui、JavaScript等技术，设计并开发小程序页面，进行知识图谱的技术预演和验证。
结果 (Result) ：成功搭建了微信小程序框架，完成了页面设计和开发工作，知识图谱技术预演顺利，通过了技术验证。

【项目经理工作辅助】

情境 (Situation) ：在项目中辅助项目经理，确保项目需求沟通顺畅，UI设计协调到位，交付材料齐全，前端代码质量高。
任务 (Task) ：辅助项目经理进行需求沟通、UI设计沟通、交付材料整理、前端代码质量管理以及部分功能设计。
行动 (Action) ：积极参与需求和UI设计的沟通，整理和管理项目交付材料，进行代码审查和质量管理，并参与功能设计。
结果 (Result) ：成功辅助项目经理完成了项目的各项工作，提高了项目的开发效率和交付质量，确保了项目的顺利进行。

其实还不够，这些项目才是求职香饽饽

你可能不具备这些项目的实战经验，很多同学写了很多年管理系统，简单增删改查项目，如果不跳出这个圈子，很难在薪资上有非常大的突破！

大厂 UI 组件库（Vue3）整体设计与开发实践(monorepo 架构)
大厂业务 Hooks 库（React 18）整体设计与开发实践(从零到一的架构、规范流程)
企业级脚手架工具开发实践
企业级文档编辑器飞书文档开发实践
前端性能、异常与行为监控
3D 可视化数字孪生低代码实战 💥
- 基于 cesium（arcGis、超图）方案的 WebGIS 开发实践
- 基于 openlayer、mapbox 开发
- 基于 WebGL 3D 可视化开发实践

年包 50W+ 薪资长线规划

核心要素

全面的技术储备
1. 框架基础
  - Vue 和 React 经验：包括 Vue3 + Typescript 和 React18（Hooks、Concurrent）
  - 掌握框架原理：React 生态库（React-Router、Redux）和 Vue 生态库原理
2. 工程化能力
  - 构建工具：Webpack、Vite、Rspack、ESBuild、swc
  - CI/CD 自动化：自动化构建和自动化部署
3. 基建能力
  - Node.js、命令行工具开发（Cli）
  - UI 库、图表库、工具库开发
4. 业务领域经验
  - 管理系统和图表类应用
  - 可视化、编辑器、云表格、低代码平台、SaaS 产品、数字孪生、三维可视化
项目经验
- 参与过至少两个大型项目，并主导过一个复杂项目
1. 管理系统：包括项目搭建、技术方案选择、技术栈构建、CI/CD 流程
2. 其他领域项目：如可视化、编辑器、云表格、低代码平台、SaaS 产品、数字孪生、三维可视化
面试表现
1. 个人介绍
  - 准备个人介绍草稿，涵盖基本信息、技术栈和项目重难点
2. STAR 法则
  - 问题描述：阐述遇到的问题或需求
  - 解决方案评估：方案对比与选择（如 React 状态管理：redux、mobx、jotai、recoil，Vue3 使用 Pinia）
  - 方案实施：具体的实施步骤
  - 反思与优化：项目反思及优化建议
3. 面试准备
  - 重点复习知识点：如 v8 内存管理、Promise A+ 规范、事件循环、this、面向对象编程原型
  - 技术储备：结合项目经验展示技术在项目中的应用
学历提升
1. 现有学历：大专
2. 未来计划：尽快取得本科证书（不需要注明具体年限）
3. 学历背景：民办学校
4. 内推建议：应对学历和工作经历问题，通过内推提升机会

补足短板

项目简单，管理后台一做就是大半年，天天 CRUD
- 看开源项目（react-hook-form ts 类型、hook 处理、状态管理、架构 Provider，keyPath）
- 找一些不错的项目练手
- 拿好的项目，学习完放在简历里， 可视化、编辑器、云表格、低代码、SaaS 产品、数字孪生、三维可视化
- 1.自研：15K， 2.外包：20K ，这个火坑， 灰（供需决定）
技术栈掌握不深不广，只会用 Vue2 （Vue3 + Typescript），React18（React stack reconciler）
架构、方案设计没碰过
- React，create-react-app、umi，没有真正从零到一去设计初始化过一个项目
- Vue，Vue CLI，Vite/Webpack。Vue2 CLI 创出来项目 1. webpack、2.vite
没有专精的技能或业务
- 自驱（假定自己是 Leader），项目的赢利点、商业价值【 可视化、编辑器、白板、团队基建、AI产品 】
- 与生俱来有些东西，好奇心、自驱力、清晰规划
- 我：管理平台，HPE（官网、后台管理），云表格（维格表、飞书云表格）、云编辑器（CKEditor 老【html string】）（语雀、【石墨文档】）

妙码学院——全程陪跑、督学、内推

⚠️ 暂不支持的文档区域，【文档小组件】

跨端开发 Taro（Taro 编译器 compiler、运行时 runtime）、uniapp
协同编辑器（文档类、画板类）wangEditor、CKEditor
团队基建工程（UI 库、图表库、Cli -> 产生产物 npm 包）
3D 可视化数字孪生 bigdata
低代码平台

课程体系 2.0 升级，除了基础知识夯实，融入了更多项目实战内容，包含：

企业级脚手架工具开发实践
企业级文档编辑器飞书文档开发实践
大厂 UI 组件库（Vue3）整体设计与开发实践
大厂业务 Hooks 库（React 18）整体设计与开发实践
埋点与数据监控平台实战
3D 可视化数字孪生实战 💥
- 基于 cesium 方案的 WebGIS 开发实践
- 基于 WebGL 3D 可视化开发实践

不同阶段对前端人的硬性要求

以下是对您提供的内容进行权威和专业化改写的建议：

1~3年

在此阶段，重点在于评估个人的基础知识和热情。对前端基础、计算机原理、网络通信和算法等领域的要求较高。由于在此阶段难以评估业务深度，因此更多关注基础知识的掌握程度。

关键在于通过学术教育或网络资源加强基础知识；
在简历中以多种方式展示对前端的热情，展现个人潜力；
积极探索前沿技术，关注国内外技术动态；
尝试开发小型项目或参与社区开源项目；
建立技术博客，以输出促进知识吸收。

3~5年

此阶段通常是向成为独立工程师发展的关键时期，避免重复使用有限的经验。

关注社区中关于进阶的资料和路线，强化基础知识；
深入掌握常用框架的高级用法，探索其原理；
在业务开发中不仅完成功能，还需考虑项目结构设计、封装基础工具、设计和开发基础组件；
思考提高团队效率的方法，例如：
- 集成代码检验和风格统一插件（如 eslint、stylelint、prettier、spellcheck）；
- 从工程化角度提高本地开发效率，优化webpack构建，探索esbuild、vite等工具；
- 对于多项目开发，整理差异和统一部分，建立内部脚手架以减少重复工作；
- 尝试搭建CI/CD平台，维护公司内部的通用npm包；
- 培养软技能，如沟通协作，协调各角色共同推进目标。

5年以上

进入此阶段，可能朝技术专家或管理方向发展。期望您能够独立负责高复杂度项目，突破关键技术难题。

负责技术调研，关注行业趋势，选择最优技术方案，具备决策能力；
拥有丰富的技术经验和技术储备，能够解决遇到的困难，并有自己的方法论；
协助或主导业务目标制定，合理推动项目达成预期效果；
是否具有团队领导经验，能够协调跨团队项目，处理团队成员情绪问题，解决技能分布不平衡等问题；
打造技术氛围，促进团队共同成长。

职业规划指导

评论区选取三位同学互动，其他同学也可以联系咨询老师，文字方式提供辅导解答。

【未知组件reminder】

前端前沿技术爱好者

Webpack 原理深度解读与面试专项突击，字节面试官带你手撕难缠打包构建面试原理题

【 初中级 】面试官：说说 Webpack 打包构建流程？

流程概述

初始化

读取配置