webpack面试问题-CSDN博客

本文链接：https://blog.csdn.net/Jcrows/article/details/148212822

一、核心概念

Webpack的构建流程是什么？
- 答案：
  1. 初始化：读取配置，创建Compiler对象
  2. 编译：从入口文件开始，递归分析依赖关系，生成依赖图
  3. 模块处理：调用Loader转换模块（如babel-loader）
  4. 输出：将处理后的模块组合成Chunk，生成最终文件
Loader和Plugin的区别？
- Loader：文件加载器（转换非JS文件，如.less → .css）
- Plugin：扩展Webpack功能（如生成HTML文件、压缩代码）
- 关键区别：Loader处理单个文件，Plugin作用于整个构建流程

二、配置与优化

如何实现代码分割（Code Splitting）？

答案：

optimization: {
       
  splitChunks: {
       
    chunks: 'all', // 分离node_modules和公共模块
    cacheGroups: {
       
      vendor: {
       
        test: /[\\/]node_modules[\\/]/,
        name: 'vendors'
      }
    }
  }
}