前端Webpack优化规范书.docVIP

前端Webpack优化规范书

一、基础配置优化

1.模式与环境分离

Webpack提供了development和production两种内置模式，需根据开发阶段合理配置：

开发模式：启用devtool:eval-cheap-module-source-map，在保证构建速度的同时提供可调试的源码映射；关闭代码压缩与混淆，减少构建时间。

生产模式：默认开启代码压缩、TreeShaking和作用域提升（ScopeHoisting），需确保mode:production，并禁用不必要的开发工具。

通过webpack-merge实现配置文件分离，创建mon.js（公共配置）、webpack.dev.js（开发环境）和d.js（生产环境），避免重复代码，提高维护效率。

2.入口与出口优化

单页应用：合理设置入口文件，避免将所有依赖打包进单个bundle.js。可通过splitChunks分离第三方库与业务代码，例如：

module.exports={optimization:{splitChunks:{chunks:all,cacheGroups:{vendor:{test:/[\\/]node_modules[\\/]/,name:vendors,chunks:all}}}}};

多页应用：使用entry对象配置多个入口，结合Html