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      // 共享工具

打包策略：

将稳定依赖（如React、Lodash）放入vendor
高频变动的业务逻辑放入app
共享工具自动提取

打包结果特征：

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'
    })
  ]
};