前端工程化

webpack配置有哪些？

webpack的配置主要包括以下几个部分：

• entry： 指定webpack打包的入口文件， 可以是单个或者多个js文件， 这个配置决定了webpack从哪个模块开始生成依赖关系图。
• output：设置webpack打包后输出的目录和文件名称， 包括path， filename和publicPath等
• moudle： 配置了不同的loaders来处理不同的模块， 比如： 对于css文件， 可以用css-loader和style-loader。
• resolve： 设置webpack如何解析模块依赖， 包括别名， 扩展名等
• plugins： 使用不同的插件可以增强webpack的功能， 例如：使用html-webpack-plugin可以将打包后的js文件自动引用到html文件中
• optimization： 可以用optimization.splitChunks和optimization.runtimeChunk配置代码拆分和运行时代码提取等优化策略。
• external： 用于配置排除打包的模块， 例如， 可以将jquery作为外置扩展， 避免将其打包到应用程序中
• devtool： 配置source-map类型
• context： webpack使用的根目录， string类型必须是绝对路径
• target：指定webpack编译的目标环境
• performance： 输出文件的性能检查配置
• noParse： 不用解析和处理的模块
• stats： 控制台输出日志控制

有哪些常见的loader和plugin

loader：

• babel-loader： 将es6+的代码转换成es5的代码
• css-loader： 解析css文件， 并处理css中的依赖关系
• style-loader： 将css代码注入到html文档中
• file-loader： 解析文件路径， 将文件赋值到输出目录， 并返回文件路径
• url-loader： 类似于file-loader， 但是可以将小于指定大小的文件转成base64编码的data url格式
• sass-loader： 将sass文件编译成css文件
• less-loader：将css文件编译成css文件
• postcss-loader： 自动添加css前缀，优化css代码等
• vue-loader： 将vue单文件组件编译成js代码。

plugin：

• HtmlWebpackPlugin： 生成html文件， 并自动将打包后的js和css文件引入到html文件中。
• CleanWebpackPlugin： 清除输出目录
• ExtractTextWebpackPlugin： 将css代码提取到单独的css文件中
• DefinePlugin： 定于全局变量
• UglifyJsWebpackPlugin： 压缩js代码
• HotModuleReplacementPlugin： 热模块替换，用于在开发环境下实现热更新。
• MiniCssExtractPlugin： 与extractTextWebpackPlugin类似， 将css代码提取到单独的css文件中
• BundleAnalyzerPlugin： 分析打包后的文件大小和依赖关系

loader和plugin的区别？

1. 功能不同：

• loader本质是一个函数， 它是一个转换器，webpack只能解析原生js文件， 对其其他类型文件就需要loader进行转换。
• plugin是一个插件，用于增强webpack功能， webpack在运行的生命周期中会广播出许多事件，plugin可以监听这些事件， 在核实的时机通过webpack提供的API改变输出结果。

2. 用法不同：

• loader的配置是在module.rules下进行的， 类型为数组， 每一项都是一个object， 里面描述了对于什么类型文件(test)， 使用什么加载(loader)和使用的参数(options)。plugin的配置在plugin下， 类型为数组， 每一项都是一个plugin的实例， 参数都通过构造函数传入。

核心区别

特性	loader	plugin
功能	模块转换器	构建过程增强器
作用	单个模块加载（编译阶段）	整个构建周期的特定钩子（如编译后， 输出前）
输入输出	处理前的模块源码-> 处理后的模块源码	无直接输入输出， 通过钩子改变构建流程
典型场景	文件格式转换(如ts->js, scss -> css)	资源优化(压缩， 分割)，环境注入， 自定义构建逻辑
使用方式	在module.rules中配置	在plugins数组中注册
执行顺序	从右到左/从下到上链式执行	按注册顺序依次执行

1. loader的工作原理

• 处理特定类型的文件：

// webpack.config.js 
module.exports = { 
    module: { 
        rules: [ 
            { 
                test: /\.ts$/, 
                use: 'ts-loader', // 将 TypeScript 转换为 JavaScript 
            }, 
            { 
                test: /\.css$/,
                use: ['style-loader', 'css-loader'], // 处理 CSS 文件 
            },
        ],
    },
};

• 链式执行示例：

// 处理 SCSS 文件：sass-loader → css-loader → style-loader
{ 
    test: /\.scss$/, 
    use: [ 
        'style-loader', // 将 CSS 注入到 DOM 
        'css-loader', // 解析 CSS 中的 @import 和 url() 
        'sass-loader', // 将 SCSS 编译为 CSS 
    ],
}

2. plugin的工作原理

• 监听构建生命周期事件：

// webpack.config.js 
const HtmlWebpackPlugin = require('html-webpack-plugin'); 
const MiniCssExtractPlugin = require('mini-css-extract-plugin'); 

module.exports = { 
    plugins: [ 
        new HtmlWebpackPlugin({ 
        template: './src/index.html', // 生成 HTML 文件并注入资源 
        }), 
        new MiniCssExtractPlugin({ 
        filename: '[name].[contenthash].css', // 提取 CSS 为独立文件
        }),
    ], 
};

• 自定义plugin示例：

class MyPlugin {
    apply(compiler) { 
        // 在编译完成后执行 
        compiler.hooks.afterEmit.tap('MyPlugin', (compilation) => { 
        console.log('编译完成，输出文件目录：', compilation.outputOptions.path);
        }); 
    } 
} 

// 使用自定义插件 
module.exports = { 
    plugins: [new MyPlugin()],
};

webpack的构建流程？

包括以下几个步骤：

1. 初始化参数： 解析webpack配置参数， 合并shell传入和webpack.config.js文件配置的参数， 形成最终的配置结果。
2. 开始编译： 使用上一次得到的参数初始化compiler对象，注册所有配置的插件， 插件监听webpack构建声明周期的事件节点， 做出相应的反应，执行对象的run方法开始执行编译。
3. 确定入口： 从配置的entry入口， 开始解析文件构建ast语法树， 找出依赖，递归下去。
4. 编译模块： 递归中根据文件类型和loader配置， 调用所有配置的loader对文件进行转换， 再找出该模块依赖的模块， 再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理。
5. 完成模块编译： 在经过第四步使用loader翻译完所有的模块后， 得到了每个模块翻译后的最终内容以及它们之间的依赖关系
6. 输出资源：根据入口和模块之间的依赖关系， 组装成一个个包含多个模块的chunk， 再把每个chunk转换成单独的文件加入到输出列表， 这步是可以修改输出内容的最后机会。
7. 输出完成： 在确定好输出内容后， 根据配置确定输出的路径和文件名， 把文件内容写入到文件系统

这个流程是一个串行的过程， webpack的运行流程是一个串行的过程， 它的工作流程就是将各个插件串联起来。在运行过程中会广播事件， 插件只需要监听它所关心的事件， 就能加入到这条webpack机制中， 去改变webpack的运作， 是的整个系统扩展性良好。

babel概念及处理

babel是一个流行的用于将新版本es6+代码转换为向后兼容版本es5代码js编译器， 它还为jsx语法提供了编译支持， 还有一些其他插件可用于转换特定类型的代码。

• 解析： 当babel接收到源码代码时， 将会调用解析器的工具， 用于将源代码转换为抽象语法树（ast）。在这个过程中， 解析器会识别代码中的语法结构， 并将其转换为对应的节点类型， 例如： 当解析器遇到一个变量声明语句时， 它将会创建一个"VariableDeclaration"节点， 并将该节点的信息存储在ast中。 ast是一个以节点为基础组成的树形结构， 每个节点都有相应的类型， 树形和子节点等信息。

• 生成 一旦ast被创建， babel将遍历整个树形结构， 对每个节点进行转换。这些转换可以是插件， 预设或手动创建的， 转换器会检查ast中的每个节点， 然后对其进行相应的修改或替换， 将以新语法转换为旧语法。例如： 如果babel遇到一个包含箭头函数的节点， 如果已经启用了转换插件， 该插件将会将箭头函数转换为其等效的函数， 代码转换后， babel将会生成一个新的ast。

• 生成 最后， babel将基于转换后的ast生成代码文本， 在这个步骤中， 将遍历转换后的ast， 并创建对应懂代码字符串， 并将这些字符串组合成一个完整的js文件， 如果启用了代码压缩， babel还可以将生成的代码进行压缩，。 总结来说， babel的原理就是将hs源代码转换为抽象语法树ast， 然后对ast在转换， 生成与源代码功能相同但向后兼容的代码。 babel提供一个强大的生态系统， 使得开发者可以轻松扩展并自定义转换器， 实现自己的功能需求。

npm install的执行过程？

npm install是node.js包管理器(npm)的一个命令， 用于安装一个项目所依赖的模块。 执行的过程如下：

1. 读取package.jsn文件， 该文件列出了项目所需要的依赖
2. 根据package.json中的依赖信息以及noe_modules目录状态， npm会决定哪些模块需要下载和安装。
3. npm会查看每个模块的可用版本， 并选择符合package.json中指定版本范围的最新版本进行安装。
4. 下载所需模块到本地的node_modules目录
5. 如何模块包含子模块(package.json中dependencied或者devDependencies中的模块)， 则递归执行上述步骤安装这些子模块。

npm run start的整个过程？

npm run start 是一个常见命令， 用于启动基于node.js的应用程序， 这个命令实际上是一种快捷方式， 它告诉npm运行在package.json文件中定义的 "start"脚本 完成过程如下： 1.解析命令与脚本配置 - 当运行npm run strat的时候， npm会： - 首先查找当前项目的package.json文件 - 在“script”字段中查找“start”对应的脚本mingl - 若存在自定义脚本： 直接执行该命令

1. 查找当前目录下的package.json文件
2. 在package.json文件中， 找到“scripts”对象
3. 在"scripts"对象中， 找到"start"建
4. 执行与"start"建关联的命令字符串