webpack多入口打包文件

一、webpack如何多入口打包文件

css 复制代码
// entry: string | array | object
module.exports = {
  entry: {
    main: './src/app.js',
    vendor: './src/vendor.js',
  },
output: {
    filename: '[name].[contenthash].bundle.js',
  },
};

二、多入口打包优势

(1)依赖关系优化

通过分离入口点,webpack可以更智能地处理共享依赖,使得公共模块单独打包,入口点只包含专属逻辑,避免重复依赖

css 复制代码
// 场景:app.js 和 vendor.js 都使用 lodash 
optimization: { 
    splitChunks: { 
        chunks: 'all' // 自动提取公共依赖 
    } 
}

(2)缓存策略优化

多入口文件支持更精细化的缓存策略,比如vendor.js这种低频修改的文件可以长期缓存,app.js这种高频修改的文件可以短周期缓存,使得热更新更快

  • 按需加载的基础,多入口架构为后续的代码拆分和动态导入奠定了基础
go 复制代码
// 后续可轻松改为动态导入
import(/* webpackChunkName: "vendor" */ './vendor.js')

(3)按需加载和动态导入的基础

go 复制代码
// 后续可轻松改为动态导入
import(/* webpackChunkName: "vendor" */ './vendor.js')

三、多入口打包使用场景

(1) 主应用+第三方库分离

​项目结构:​

scss 复制代码
src/
├── app.js        // 业务逻辑
├── vendor.js     // 第三方库
└── utils.js      // 共享工具

​打包策略:​

  1. 将稳定依赖(如React、Lodash)放入vendor
  2. 高频变动的业务逻辑放入app
  3. 共享工具自动提取

​打包结果特征:​

  • vendor包变化频率低 → 适合持久缓存
  • app包体积精简 → 加快热更新速度

(2) 多页面应用(MPA)架构

对于传统多页面项目:

css 复制代码
entry: {
  home: './src/home/index.js',
  about: './src/about/index.js',
  contact: './src/contact/index.js'
}

配合 html-webpack-plugin 自动生成各页面的HTML:

arduino 复制代码
plugins: [
  new HtmlWebpackPlugin({
    template: './home.html',
    chunks: ['home']  // 只注入home相关的JS
  })
]

(3)微前端架构适配

在多团队协作的微前端场景中:

css 复制代码
entry: {
  main: './src/main.js',
  'team-a': './src/team-a/bootstrap.js',
  'team-b': './src/team-b/bootstrap.js'
}

优势体现:

  • 独立团队拥有自己的入口
  • 共享依赖自动优化
  • 独立部署能力

四、通过插件分析入口依赖

性能监控集成

结合webpack-bundle-analyzer分析各入口:

ini 复制代码
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  plugins: [
    new BundleAnalyzerPlugin({
      analyzerMode: 'static'
    })
  ]
};
相关推荐
黄毛火烧雪下1 天前
高效的项目构建和优化之前端构建工具
前端
90后的晨仔1 天前
在 macOS 上轻松获取 GIF 图片总时长:多种实用方法详解
前端
技术钱1 天前
vue3前端解析excel文件
前端·vue.js·excel
mapbar_front1 天前
顺利通过试用期:避开三大陷阱,掌握三个关键点
前端·面试
why技术1 天前
1K+Star的开源项目能给一个在校大学生带来什么?
前端·人工智能·后端
@PHARAOH1 天前
HOW - localstorage 超时管理方案
前端·javascript·vue.js
im_AMBER1 天前
React 05
开发语言·前端·javascript·笔记·学习·react.js·前端框架
showker1 天前
ecstore等产品开启缓存-后台及前台不能登录原因-setcookie+session问题
java·linux·前端
csj501 天前
前端基础之《React(4)—webpack简介-编译打包优化》
前端·react
万少1 天前
Trae AI 编辑器6大使用规则
前端·javascript·人工智能