Webpack配置错，打包慢到哭！
💓 博客主页：瑕疵的CSDN主页
📝 Gitee主页：瑕疵的gitee主页
⏩ 文章专栏：《热点资讯》
Webpack配置错，打包慢到哭！—— 一个让前端崩溃的真实案例
目录
项目一跑Webpack，打包时间从5分钟飙到30分钟。老板在群里问“咋还没好？”，我盯着终端，心在滴血。这破配置，又犯了老毛病。
问题报错
不是报错，是慢到窒息。每次改个代码，等半天才出包。用webpack --profile看，发现compilation阶段卡在90%。我翻了配置，一堆loader，但没缓存。
核心根源
Webpack默认不缓存。每次打包，它都重新编译所有模块。尤其项目大了，像我这种用React的，组件多，编译慢得像老牛拉破车。更坑的是，有人把devtool: 'eval-source-map'写在生产配置里——这玩意儿会生成超大source map，拖慢打包。还有exclude: /node_modules/没写，loader瞎转node_modules里的库，纯纯浪费CPU。
解决代码
对比错误和正确配置：
// 错误配置：没缓存，source map乱开module.exports={entry:'./src/index.js',output:{path:path.resolve(__dirname,'dist'),filename:'bundle.js'},devtool:'eval-source-map',// 生产环境别用这个！module:{rules:[{test:/\.js$/,use:'babel-loader'// 没排除node_modules，全量转}]}};// 正确配置：加缓存，优化source mapconstpath=require('path');const{CleanWebpackPlugin}=require('clean-webpack-plugin');module.exports={entry:'./src/index.js',output:{path:path.resolve(__dirname,'dist'),filename:'bundle.js'},// 关键：启用文件系统缓存cache:{type:'filesystem',// 用文件系统缓存buildDependencies:{config:[__filename]// 依赖配置文件}},// 生产环境用cheap-module-source-mapdevtool:'cheap-module-source-map',module:{rules:[{test:/\.js$/,use:'babel-loader',exclude:/node_modules/// 排除node_modules，别让loader瞎转}]},optimization:{splitChunks:{// 代码分割chunks:'all'}}};加了cache后，第二次打包快了3倍。devtool也改了，生产环境别用eval-source-map。
避坑总结
- 用
cache: { type: 'filesystem' }，省时省力。不加它，每次打包都重头编译。 - 生产环境别用
eval-source-map，用cheap-module-source-map——文件小，打包快。 exclude: /node_modules/必须写，否则loader转node_modules里的库，纯纯浪费。optimization.splitChunks别漏，大项目分包能提速50%。
记住：Webpack不是魔法，配置错了，它比你更慢。下次再慢，先看配置，别瞎等。我昨天调了3小时，就为这破配置——现在打包1分钟搞定，老板终于不催了。爽！