🛠️ 工程化工具 - WEBPACK

What is Webpack? What problems does it solve?

考察点：基础概念理解。

答案：

Webpack是一个现代JavaScript应用程序的静态模块打包工具。它将项目中的各种资源（JavaScript、CSS、图片等）视为模块，通过分析模块间的依赖关系，将它们打包成一个或多个bundle文件。

解决的主要问题：

1. 模块化管理：支持CommonJS、ES6 modules、AMD等多种模块规范
2. 资源整合：将JS、CSS、图片、字体等不同类型文件统一处理
3. 依赖分析：自动分析模块依赖关系，按需加载和打包
4. 代码优化：提供压缩、Tree Shaking、代码分割等优化功能
5. 开发体验：热更新、Source Map等提升开发效率

基本配置示例：

// webpack.config.js
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: __dirname + '/dist'
  },
  mode: 'development'
};

What is the role of Webpack’s entry configuration? How to configure multiple entries?

考察点：入口配置基础。

答案：

entry配置项指定了Webpack构建依赖关系图的起始点。Webpack从入口文件开始，递归地分析所有依赖模块，构建完整的依赖图谱。

单入口配置：

module.exports = {
  entry: './src/index.js'
  // 或者
  entry: {
    main: './src/index.js'
  }
};

多入口配置方法：

1. 对象语法（推荐）：

module.exports = {
  entry: {
    app: './src/app.js',
    admin: './src/admin.js',
    vendor: './src/vendor.js'
  }
};

2. 数组语法（合并入口）：

module.exports = {
  entry: {
    app: ['./src/polyfills.js', './src/app.js']
  }
};

多入口的优势：

• 分离不同模块（如管理后台和用户端）
• 提取第三方库到单独bundle
• 实现代码分割和并行加载
• 提高缓存效率

What’s the difference between filename and path in output configuration?

考察点：输出配置理解。

答案：

output配置决定了Webpack如何输出编译后的文件。filename和path是两个核心配置项，作用不同：

path与filename的区别：

• path：指定输出文件的目录路径，必须是绝对路径
• filename：指定输出文件的名称和命名规则

基本配置示例：

const path = require('path');

module.exports = {
  output: {
    path: path.resolve(__dirname, 'dist'), // 输出目录
    filename: 'bundle.js' // 输出文件名
  }
};

动态filename配置：

module.exports = {
  output: {
    path: path.resolve(__dirname, 'dist'),
    // 使用占位符
    filename: '[name].[contenthash].js', // 多入口时使用入口名
    // 其他常用占位符
    // [hash] - 构建hash
    // [chunkhash] - chunk hash  
    // [contenthash] - 内容hash
    // [id] - chunk id
  }
};

多入口对应输出：

// 入口配置
entry: {
  app: './src/app.js',
  vendor: './src/vendor.js'
}
// 输出: dist/app.js, dist/vendor.js

What are the values of Webpack’s mode configuration? What environments are they used for?

考察点：构建模式区分。

答案：

mode配置用于指定Webpack的构建模式，它会自动启用相应的优化配置。Webpack 4引入此配置项，提供了三个预设值：

三种模式详解：

1. development（开发模式）：

module.exports = {
  mode: 'development'
};

• 启用NamedChunksPlugin和NamedModulesPlugin
• 开启详细的错误信息和警告
• 快速的增量编译
• 不压缩代码，保持可读性

2. production（生产模式）：

module.exports = {
  mode: 'production'
};

• 启用FlagDependencyUsagePlugin、TerserPlugin等
• 自动压缩代码和优化性能
• 启用Tree Shaking
• 作用域提升(Scope Hoisting)

3. none（无模式）：

module.exports = {
  mode: 'none'
};

• 不启用任何默认优化选项
• 需要手动配置所有插件
• 适用于自定义构建流程

环境区分使用：

• development：本地开发调试
• production：线上部署环境
• none：需要完全自定义配置时

What is a loader? What’s the difference between css-loader and style-loader?

考察点：loader概念与CSS处理。

答案：

Loader是Webpack的核心功能之一，用于转换非JavaScript文件。Webpack本身只能理解JavaScript和JSON文件，loader让Webpack能够处理其他类型的文件并将它们转换为有效模块。

css-loader与style-loader的区别：

css-loader：

• 解析CSS文件中的@import和url()等语句
• 将CSS转换为CommonJS模块
• 处理CSS模块化（CSS Modules）
• 不会将样式插入到DOM中

// css-loader处理后的结果（简化）
module.exports = "body { color: red; }";

style-loader：

• 将CSS代码通过