Webpack多页与单页应用配置

考察点分析 link

该题目主要考察候选人对Webpack配置的底层原理和工程化能力的掌握程度，核心评估维度包括：

1. 多入口配置能力：理解SPA/MPA在entry配置上的本质差异
2. HTML生成策略：掌握HtmlWebpackPlugin在单页与多页场景下的不同用法
3. 输出结构设计：合理组织构建产物的目录结构避免文件冲突
4. 资源优化意识：在多页场景下的公共依赖提取策略
5. 工程化思维：动态配置方案应对大规模页面场景

技术解析 link

关键知识点 link

1. Entry配置 > HTML模板生成 > 输出文件名规则 > SplitChunks优化

原理剖析 link

SPA配置：

• 单入口模式：entry: { main: './src/index.js' }
• 使用单个HtmlWebpackPlugin实例
• 输出使用[name].[contenthash].js避免缓存问题

MPA配置：

• 多入口声明：entry: { page1: './src/page1.js', page2: './src/page2.js' }
• 多个HtmlWebpackPlugin实例（每个页面对应一个）
• 通过filename: 'pages/[name]/index.html'实现目录隔离
• 使用chunks: ['page1', 'vendors']精确控制资源注入

优化策略：

• 通过SplitChunks提取公共模块：

  optimization: {
  splitChunks: {
    cacheGroups: {
      commons: {
        test: /[\\/]node_modules[\\/]/,
        name: 'vendors',
        chunks: 'all'
      }
    }
  }
}
  

常见误区 link

1. MPA中未指定chunks导致所有JS被注入各个页面
2. 输出文件名未使用哈希导致浏览器缓存问题
3. 未正确处理静态资源路径导致页面资源404
4. 公共模块提取策略不当造成重复打包

问题解答 link

SPA与MPA的Webpack配置差异主要体现在：

1. 入口配置：

   • SPA：单入口指向主JS文件
   • MPA：对象形式定义多个入口，键名对应页面名称

2. HTML生成：

   • SPA：单个HtmlWebpackPlugin，自动注入所有chunks
   • MPA：多个HtmlWebpackPlugin实例，每个配置template、chunks和自定义filename

3. 输出结构：

   • SPA：output.filename: '[name].bundle.js'
   • MPA：采用filename: 'pages/[name]/[name].[hash].js'格式实现路径隔离

4. 优化差异：

   • MPA需显式配置SplitChunks分离公共模块
   • SPA更适合使用动态导入实现按需加载

解决方案 link

基础配置示例 link

  // SPA配置
module.exports = {
  entry: './src/index.js',
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ]
}

// MPA配置（动态生成示例）
const pages = ['home', 'about', 'contact'];

module.exports = {
  entry: pages.reduce((config, page) => {
    config[page] = `./src/pages/${page}/index.js`;
    return config;
  }, {}),
  plugins: pages.map(page => 
    new HtmlWebpackPlugin({
      template: `./src/pages/${page}/template.html`,
      filename: `${page}.html`,
      chunks: [page, 'vendors']
    })
  )
}
  

优化建议 link

1. 目录结构：按功能划分pages/[name]/index.js + template.html
2. 缓存策略：使用[contenthash]实现长效缓存
3. 动态加载：对MPA中的非核心组件使用import()动态加载
4. 构建效率：配置cache-loader提升二次构建速度

深度追问 link

1. 如何处理MPA中的公共头部/尾部？

• 答案提示：Webpack的HTML模板继承方案

2. 如何实现开发环境的热更新优化？

• 答案提示：配置devServer.historyApiFallback

3. 如何统计多页应用的包体积变化？

• 答案提示：使用webpack-bundle-analyzer