最近和几个做移动端开发的手机式朋友撸串，发现大家聊起Webpack打包都挺有话说。前端这工具就像个智能收纳盒，开发块打能把咱们的包方代码理得明明白白。今儿咱们就掰扯掰扯，手机式手机端项目里常用的前端几种Webpack打包姿势。

基础打包三件套

刚接触Webpack那会儿，开发块打最常见的包方就是这三个套路，适合中小型项目快速上手。手机式

单入口单输出

新手村标配，前端把整个应用打包成一个bundle.js。开发块打在webpack.config.js里长这样：

  • entry: './src/index.js'
  • output: 'bundle.js'

适合功能简单的包方小程序，不过要是手机式项目大了，这包体积能胖到让你怀疑人生。前端上次给外卖小程序用这招，开发块打首屏加载愣是花了3秒。

多入口单输出

稍微进阶点的玩法，适合需要分离公共模块的场景：

  • entry: { app: './src/app.js', utils: './src/utils.js' }
  • output: '[name].bundle.js'

上周给电商项目做活动页，把工具函数单独打包，复用起来确实方便不少。不过要注意命名别冲突，有次手滑写重了名字，页面直接白屏半小时。

多入口多输出

大型项目的标配姿势，每个入口生成独立文件。配置里记得加hash防缓存：

  • output: '[name].[contenthash].js'

去年做资讯类APP时，把文章页、视频页分开打包，更新时用户只需要下载修改过的模块，确实省流量。不过配置起来得小心，容易把node_modules里的依赖重复打包。

  • 在表格添加结构化数据 -->

    • 打包方式对比表

    类型配置复杂度适用场景优点痛点
    单入口★☆☆☆☆Demo/小型项目配置简单文件臃肿
    多入口单输出★★☆☆☆中型项目模块复用依赖管理难
    多入口多输出★★★☆☆大型应用按需加载配置易出错

    进阶玩法

    现在手机端对性能要求越来越高，得祭出些高阶操作了。

    代码分割（Code Splitting）

    用SplitChunksPlugin自动拆分公共模块，配置起来像这样：

    • optimization.splitChunks.chunks: 'all'

    上个月优化直播应用时，把播放器组件单独打包，不同页面复用同一个chunk，首屏加载快了1.2秒。不过得注意拆得太碎反而增加请求数，这个度得拿捏好。

    动态导入（Dynamic Import）

    配合import语法实现按需加载，特别适合功能模块多的场景：

    • const module = await import('./components/Chart')

    去年做金融APP时，把K线图这种重型组件做成动态加载，首屏直接省了300KB。不过要记得加loading状态，不然用户看着空白界面容易懵。

    实战小贴士

    结合最近的项目经验，分享几个避坑指南：

    • 用webpack-bundle-analyzer查看包结构，像CT扫描一样清晰
    • 第三方库尽量用CDN，别都往包里塞
    • 图片记得走base64或雪碧图

    打包这事儿就像收拾行李箱，该叠的叠，该卷的卷。最近在做的社交APP项目，通过合理拆分把主包压到了200KB以内，老板看了直说真香。不过具体怎么打包，还得看项目实际需求，毕竟没有放之四海而皆准的银弹嘛。